import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { router } from '@inertiajs/react';
import { Trash2 } from 'lucide-react';

export function ConfirmDeleteButton({ url, label = 'Hapus', description = 'Data yang dihapus tidak dapat dikembalikan.' }: { url: string; label?: string; description?: string }) {
    const [open, setOpen] = useState(false);
    const [processing, setProcessing] = useState(false);
    const confirm = () => { setProcessing(true); router.delete(url, { onFinish: () => { setProcessing(false); setOpen(false); } }); };
    return <><Button type="button" variant="ghost" size="sm" className="text-destructive hover:text-destructive" onClick={() => setOpen(true)}><Trash2 className="mr-1.5 size-4" />{label}</Button><Dialog open={open} onOpenChange={setOpen}><DialogContent><DialogHeader><DialogTitle>Hapus data?</DialogTitle><DialogDescription>{description}</DialogDescription></DialogHeader><DialogFooter><Button type="button" variant="outline" onClick={() => setOpen(false)}>Batal</Button><Button type="button" variant="destructive" disabled={processing} onClick={confirm}>{processing ? 'Menghapus...' : 'Ya, hapus'}</Button></DialogFooter></DialogContent></Dialog></>;
}