"use client";

type ConfirmDeleteModalProps = {
    open: boolean;
    title: string;                // e.g. "Delete Medicine?"
    description: string;          // e.g. "Are you sure you want to remove Cetirizine?"
    onCancel: () => void;
    onConfirm: () => void;
    loading?: boolean;
};

export default function ConfirmDeleteModal({
    open,
    title,
    description,
    onCancel,
    onConfirm,
    loading = false,
}: ConfirmDeleteModalProps) {
    if (!open) return null;

    return (
        <div className="fixed inset-0 z-[200] flex items-center justify-center p-4">
            {/* Backdrop */}
            <div className="absolute inset-0 bg-black/40" onClick={onCancel} />

            {/* Dialog */}
            <div className="relative bg-white w-full max-w-[400px] rounded-3xl shadow-2xl px-7 py-8 flex flex-col items-center text-center">
                {/* Trash icon */}
                <div className="w-14 h-14 rounded-full bg-[#fff1f1] text-[#ef4444] flex items-center justify-center mb-5">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                        <polyline points="3 6 5 6 21 6" />
                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
                    </svg>
                </div>

                <p className="text-xl font-bold text-[#111111] mb-2">{title}</p>
                <p className="text-sm text-[#9ca3af] mb-8">{description}</p>

                <div className="flex items-center gap-3 w-full">
                    <button
                        onClick={onCancel}
                        disabled={loading}
                        className="flex-1 bg-[#e5e7eb] text-[#374151] text-base font-semibold py-3.5 rounded-2xl cursor-pointer hover:bg-[#d1d5db] transition-colors disabled:opacity-60"
                    >
                        Cancel
                    </button>
                    <button
                        onClick={onConfirm}
                        disabled={loading}
                        className="flex-1 bg-[#d4537e] text-white text-base font-semibold py-3.5 rounded-2xl cursor-pointer hover:bg-[#993556] transition-colors disabled:opacity-60"
                    >
                        {loading ? "Deleting..." : "Yes"}
                    </button>
                </div>
            </div>
        </div>
    );
}