5. Thiết Kế Form, Modal & Micro-Interactions: Trải Nghiệm Người Dùng Tinh Tế

// InteractiveModal.tsx
import { useState } from 'react';
import { X, CheckCircle2 } from 'lucide-react';

export function QuickConfirmModal({ isOpen, onClose, onConfirm }: any) {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/60 backdrop-blur-sm animate-fade-in">
      <div className="bg-slate-900 border border-slate-800 rounded-2xl p-6 max-w-md w-full shadow-2xl animate-scale-up">
        <div className="flex justify-between items-center mb-4">
          <div className="flex items-center gap-2 text-indigo-400 font-bold">
            <CheckCircle2 className="w-5 h-5" /> <span>Xác nhận hành động</span>
          </div>
          <button onClick={onClose} className="p-1 text-slate-400 hover:text-white rounded-lg">
            <X className="w-5 h-5" />
          </button>
        </div>
        <p className="text-slate-300 text-sm mb-6">
          Bạn có chắc chắn muốn xuất bản hệ thống này lên môi trường Production không?
        </p>
        <div className="flex justify-end gap-3">
          <button onClick={onClose} className="px-4 py-2 rounded-xl text-slate-300 hover:bg-slate-800 text-sm font-semibold">
            Hủy bỏ
          </button>
          <button onClick={onConfirm} className="px-5 py-2 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-bold shadow-lg shadow-indigo-600/30">
            Xác nhận ngay
          </button>
        </div>
      </div>
    </div>
  );
}