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

export default function DeleteModal({ isOpen, onClose, onConfirm, title, message, itemName }) {
    if (!isOpen) return null;

    return (
        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200">
            <div className="bg-white rounded-[2.5rem] w-full max-w-md shadow-2xl border border-gray-100 overflow-hidden animate-in zoom-in duration-300">
                {/* Header */}
                <div className="p-8 border-b border-gray-50 flex items-center justify-between bg-red-50/30">
                    <div className="flex items-center gap-4">
                        <div className="p-3 bg-red-100 text-red-600 rounded-2xl">
                            <AlertCircle size={24} />
                        </div>
                        <div>
                            <h3 className="text-xl font-black text-gray-900">{title || 'Confirm Delete'}</h3>
                            <p className="text-[10px] font-bold text-red-400 uppercase tracking-widest mt-0.5">Dangerous Action</p>
                        </div>
                    </div>
                    <button 
                        onClick={onClose} 
                        className="p-2 hover:bg-white rounded-full transition-colors text-gray-400 hover:text-gray-900 shadow-sm outline-none"
                    >
                        <X size={20} />
                    </button>
                </div>

                {/* Body */}
                <div className="p-10 text-center space-y-6">
                    <div className="space-y-3">
                        <p className="text-sm font-semibold text-gray-500 leading-relaxed">
                            {message || "Are you sure you want to delete this item? This action cannot be undone."}
                        </p>
                        {itemName && (
                            <div className="px-4 py-2 bg-gray-50 rounded-xl border border-gray-100 inline-block">
                                <span className="text-sm font-black text-gray-900">{itemName}</span>
                            </div>
                        )}
                    </div>
                </div>

                {/* Actions */}
                <div className="p-8 bg-gray-50/50 border-t border-gray-50 flex gap-4">
                    <button
                        onClick={onClose}
                        className="flex-1 px-6 py-4 bg-white border border-gray-200 text-gray-600 rounded-2xl font-black text-xs hover:bg-gray-50 transition-all shadow-sm outline-none"
                    >
                        CANCEL
                    </button>
                    <button
                        onClick={() => {
                            onConfirm();
                            onClose();
                        }}
                        className="flex-1 px-6 py-4 bg-red-600 text-white rounded-2xl font-black text-xs hover:bg-red-700 hover:scale-[1.02] active:scale-95 transition-all shadow-lg shadow-red-100 flex items-center justify-center gap-2 outline-none"
                    >
                        <Trash2 size={16} />
                        DELETE PERMANENTLY
                    </button>
                </div>
            </div>
        </div>
    );
}