import { Trash2, X } from 'lucide-react';
import React from 'react';
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogMedia,
    AlertDialogTitle,
} from "@/components/ui/alert-dialog";

interface DeleteConfirmationProps {
    isOpen: boolean;
    onOpenChange: (open: boolean) => void;
    title?: React.ReactNode;
    description?: React.ReactNode;
    onDelete: () => void;
    cancelText?: string;
    deleteText?: string;
}

export function DeleteConfirmation({
    isOpen,
    onOpenChange,
    title = "Hapus item?",
    description = "Tindakan ini tidak dapat dibatalkan. Item ini akan dihapus secara permanen.",
    onDelete,
    cancelText = "Batal",
    deleteText = "Hapus",
}: DeleteConfirmationProps) {
    return (
        <AlertDialog open={isOpen} onOpenChange={onOpenChange}>
            <AlertDialogContent size="default">
                <AlertDialogHeader>
                    <AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
                        <Trash2 className="size-5" />
                    </AlertDialogMedia>
                    <AlertDialogTitle>{title}</AlertDialogTitle>
                    <AlertDialogDescription>
                        {description}
                    </AlertDialogDescription>
                </AlertDialogHeader>
                <AlertDialogFooter>
                    <AlertDialogCancel variant="outline" className="gap-2">
                        <X className="size-4" />
                        {cancelText}
                    </AlertDialogCancel>
                    <AlertDialogAction onClick={onDelete} variant="destructive" className="gap-2">
                        <Trash2 className="size-4" />
                        {deleteText}
                    </AlertDialogAction>
                </AlertDialogFooter>
            </AlertDialogContent>
        </AlertDialog>
    );
}