'use client'
import React from 'react';
import {
    Dialog,
    DialogContent,
} from '@/components/ui/dialog';
import { Trash2, AlertTriangle, X } from 'lucide-react';

interface DeleteDialogProps {
    isOpen: boolean;
    onClose: () => void;
    handleDelete: () => void;
    title?: string;
    description?: string;
    loading?: boolean;
    actionButtonText?: string;
}

export function DeleteDialog({
    isOpen,
    onClose,
    handleDelete,
    title,
    description,
    loading,
    actionButtonText
}: DeleteDialogProps) {

    return (
        <Dialog open={isOpen} onOpenChange={onClose}>
            <DialogContent className="max-w-[400px] p-0 border-0 bg-white rounded-[24px] shadow-2xl overflow-hidden focus:outline-none">
                <div className="relative pt-10 pb-8 px-6 flex flex-col items-center text-center">
                    {/* Close Button */}
                    <button
                        onClick={onClose}
                        className="absolute right-4 top-4 p-1.5 rounded-full text-gray-400 hover:bg-gray-100 transition-colors focus:outline-none"
                    >
                        <X size={18} />
                    </button>

                    {/* Warning Icon Container */}
                    <div className="relative mb-6">
                        {/* Animated Pulses */}
                        <div className="absolute inset-0 bg-red-100 rounded-full animate-ping opacity-20" style={{ animationDuration: '3s' }}></div>
                        <div className="absolute inset-[-4px] bg-red-50 rounded-full opacity-50"></div>

                        <div className="relative flex items-center justify-center w-20 h-20 bg-white rounded-full shadow-xl shadow-red-100/50">
                            <Trash2 className="w-10 h-10 text-red-500" strokeWidth={1.5} />
                        </div>

                        {/* Little Alert Badge */}
                        <div className="absolute -bottom-1 -right-1 flex items-center justify-center w-7 h-7 bg-white rounded-full shadow-md border-2 border-red-50">
                            <AlertTriangle size={12} className="text-amber-500 fill-amber-50" />
                        </div>
                    </div>

                    <div className="space-y-3">
                        <h2 className="text-[24px] font-bold text-gray-900 leading-tight">
                            {title || 'Delete Menu'}
                        </h2>
                        <p className="text-[15px] font-medium text-gray-400/80 leading-relaxed px-4">
                            {description || 'This action is irreversible. All related data will be permanently removed from our servers.'}
                        </p>
                    </div>

                    <div className="flex flex-col w-full gap-3 mt-10">
                        <button
                            className="w-full py-4 text-[16px] font-bold text-white bg-red-500 rounded-2xl shadow-lg shadow-red-200 hover:bg-red-600 hover:shadow-red-300 active:scale-[0.98] transition-all duration-200 flex items-center justify-center gap-2"
                            onClick={handleDelete}
                            disabled={loading}
                        >
                            {loading ? (
                                <div className="h-5 w-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                            ) : (
                                actionButtonText || 'Yes, Delete it'
                            )}
                        </button>
                        <button
                            className="w-full py-4 text-[16px] font-bold text-gray-500 bg-gray-50 rounded-2xl hover:bg-gray-100 active:scale-[0.98] transition-all duration-200"
                            onClick={onClose}
                        >
                            No, Keep it
                        </button>
                    </div>
                </div>
            </DialogContent>
        </Dialog>
    );
}

export default DeleteDialog;