import React from "react";
import { Loader } from "lucide-react";
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
    DialogDescription,
    DialogFooter,
    DialogClose
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";

type Props = {
    open?: boolean;
    pending?: boolean;
    onConfirm?: () => void;
    onCancel?: () => void;
};

export const DeleteDialog: React.FC<Props> = (props) => {
    const {
        open,
        pending,
        onConfirm,
        onCancel
    } = props;

    return (
        <Dialog open={open} onOpenChange={(open) => !open && onCancel && onCancel()}>
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>Are you absolutely sure?</DialogTitle>

                    <DialogDescription>
                        This action cannot be undone. This will permanently delete your{' '}
                    </DialogDescription>
                </DialogHeader>

                <DialogFooter>
                    <DialogClose asChild>
                        <Button variant="outline" onClick={onCancel}>Cancel</Button>
                    </DialogClose>

                    <Button
                      variant="destructive"
                      aria-label="Delete selected rows"
                      disabled={pending}
                      onClick={onConfirm}>
                        {pending && (
                            <Loader
                              className="mr-2 size-4 animate-spin"
                              aria-hidden="true" />
                        )}

                        Delete
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
};