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