import { AlertDialogProps } from '@radix-ui/react-alert-dialog';
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
} from '../ui/alert-dialog';

type Props = AlertDialogProps & {
    message: string;
    submessage: string;
    title: string;
    onConfirm: () => void;
};

export default function ConfirmAlert({
    onOpenChange,
    onConfirm,
    message,
    submessage,
    title,
    ...props
}: Props) {
    return (
        <AlertDialog onOpenChange={onOpenChange} {...props}>
            <AlertDialogContent className="top-[40%]">
                <AlertDialogHeader>
                    <AlertDialogTitle>{title}</AlertDialogTitle>
                    <AlertDialogDescription>
                        <span>{message}</span> &nbsp;
                        {submessage && (
                            <span className="text-md py-2 text-red-500">
                                {submessage}
                            </span>
                        )}
                    </AlertDialogDescription>
                </AlertDialogHeader>
                <AlertDialogFooter>
                    <AlertDialogCancel className="text-xs">
                        Batal
                    </AlertDialogCancel>
                    <AlertDialogAction
                        className="bg-destructive text-xs text-white hover:bg-destructive/80"
                        onClick={() => onConfirm?.()}
                    >
                        Lanjutkan
                    </AlertDialogAction>
                </AlertDialogFooter>
            </AlertDialogContent>
        </AlertDialog>
    );
}