import { Button } from '@/Components/ui/button';
import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
import { ReactNode } from 'react';

export default function ConfirmDialog({ open, title, description, confirmLabel = 'Confirm', danger, loading, onConfirm, onClose }: { open: boolean; title: string; description?: ReactNode; confirmLabel?: string; danger?: boolean; loading?: boolean; onConfirm: () => void; onClose: () => void }) {
    return (
        <Transition show={open}>
            <Dialog onClose={onClose} className="relative z-[70]">
                <TransitionChild enter="duration-150" enterFrom="opacity-0" enterTo="opacity-100" leave="duration-100" leaveFrom="opacity-100" leaveTo="opacity-0">
                    <div className="fixed inset-0 bg-black/60 backdrop-blur-sm" aria-hidden />
                </TransitionChild>
                <div className="fixed inset-0 flex items-center justify-center p-4">
                    <TransitionChild enter="duration-200 ease-out" enterFrom="opacity-0 scale-95" enterTo="opacity-100 scale-100" leave="duration-100" leaveFrom="opacity-100 scale-100" leaveTo="opacity-0 scale-95">
                        <DialogPanel className="w-full max-w-md rounded-2xl border border-border bg-popover p-6 shadow-lift">
                            <DialogTitle className="text-h3">{title}</DialogTitle>
                            {description && <p className="mt-2 text-sm text-muted-foreground">{description}</p>}
                            <div className="mt-6 flex justify-end gap-2">
                                <Button variant="secondary" onClick={onClose}>Cancel</Button>
                                <Button variant={danger ? 'danger' : 'primary'} loading={loading} onClick={onConfirm}>{confirmLabel}</Button>
                            </div>
                        </DialogPanel>
                    </TransitionChild>
                </div>
            </Dialog>
        </Transition>
    );
}