1import {
 2    AlertDialog,
 3    AlertDialogAction,
 4    AlertDialogCancel,
 5    AlertDialogContent,
 6    AlertDialogDescription,
 7    AlertDialogFooter,
 8    AlertDialogHeader,
 9    AlertDialogTitle,
10} from "@marzneshin/common/components";
11import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
12import { FC } from "react";
13import { useTranslation } from "react-i18next";
14
15interface DeleteConfirmationProps {
16    action: () => void;
17    onOpenChange: (open: boolean) => void;
18    open: boolean;
19}
20
21export const DeleteConfirmation: FC<DeleteConfirmationProps> = ({
22    action,
23    open,
24    onOpenChange,
25}) => {
26    const { t } = useTranslation();
27    return (
28        <AlertDialog open={open} onOpenChange={onOpenChange}>
29            <AlertDialogContent>
30                <AlertDialogHeader>
31                    <AlertDialogTitle className="flex flex-row gap-3 items-center text-destructive">
32                        <ExclamationTriangleIcon className="p-2 w-10 h-10 bg-red-200 rounded-md border-2 border-destructive" />
33                        {t("delete-confirmation.title")}
34                    </AlertDialogTitle>
35                    <AlertDialogDescription>
36                        {t("delete-confirmation.desc")}
37                    </AlertDialogDescription>
38                </AlertDialogHeader>
39                <AlertDialogFooter>
40                    <AlertDialogCancel>{t("cancel")}</AlertDialogCancel>
41                    <AlertDialogAction onClick={action} className="bg-destructive">
42                        {t("delete")}
43                    </AlertDialogAction>
44                </AlertDialogFooter>
45            </AlertDialogContent>
46        </AlertDialog>
47    );
48};