import React from 'react';
import { AlertTriangle, X } from 'lucide-react';

interface ConfirmModalProps {
  isOpen: boolean;
  title?: string;
  message?: string;
  onConfirm: () => void;
  onCancel: () => void;
}

export const ConfirmModal: React.FC<ConfirmModalProps> = ({ isOpen, title, message, onConfirm, onCancel }) => {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-[6000] flex items-end sm:items-center justify-center p-0 sm:p-4">
      <div className="absolute inset-0 bg-gray-900/60 backdrop-blur-sm animate-in fade-in duration-200" onClick={onCancel} />
      <div className="relative w-full sm:max-w-sm h-full sm:h-auto max-h-screen sm:max-h-[85vh] bg-[var(--surface)] rounded-t-2xl sm:rounded-2xl shadow-2xl p-6 sm:p-8 animate-in zoom-in-95 duration-200 flex flex-col">
        <div className="flex justify-between items-center mb-4 shrink-0">
          <div className="w-12 h-12 rounded-2xl bg-red-50 flex items-center justify-center text-red-500 shadow-inner">
            <AlertTriangle className="w-6 h-6" />
          </div>
          <button onClick={onCancel} className="p-2 hover:bg-[var(--background)] rounded-full transition-colors">
            <X className="w-5 h-5 text-[var(--text-muted)]" />
          </button>
        </div>
        
        <h3 className="text-xl font-black text-[var(--text-primary)] mb-2">{title || 'Xác nhận'}</h3>
        <p className="text-sm text-[var(--text-muted)] mb-8 leading-relaxed">
          {message || 'Bạn có chắc chắn muốn thực hiện hành động này không?'}
        </p>

        <div className="grid grid-cols-2 gap-3 pt-2 mt-auto">
          <button
            onClick={onCancel}
            className="py-4 bg-[var(--background)] hover:bg-[var(--background)] text-[var(--text-secondary)] font-bold rounded-2xl transition-all active:scale-95"
          >
            Hủy bỏ
          </button>
          <button
            onClick={onConfirm}
            className="py-4 bg-red-600 hover:bg-red-700 text-white font-bold rounded-2xl shadow-lg shadow-red-100 transition-all active:scale-95"
          >
            Xác nhận
          </button>
        </div>
      </div>
    </div>
  );
};