import { TriangleAlertIcon } from "lucide-react";
import type { ReactNode } from "react";
import {
	AlertDialog,
	AlertDialogAction,
	AlertDialogCancel,
	AlertDialogContent,
	AlertDialogDescription,
	AlertDialogFooter,
	AlertDialogHeader,
	AlertDialogTitle,
	AlertDialogTrigger,
} from "~/components/ui/alert-dialog";
export const Confirm = ({
	children,
	title,
	description,
	onConfirm,
	onCancel,
	open,
	setOpen,
	onlyHedless,
	cancelText,
	confirmText,
}: {
	children: ReactNode;

	title: string;
	description: string;
	onConfirm: () => void;
	onCancel?: () => void;
	open?: boolean;
	setOpen?: (open: boolean) => void;
	onlyHedless?: boolean;
	cancelText?: string;
	confirmText?: string;
}) => {
	return (
		<AlertDialog onOpenChange={setOpen} open={open}>
			{onlyHedless ? null : (
				<AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
			)}
			<AlertDialogContent>
				<AlertDialogHeader className="place-items-center! items-center">
					<div className="mx-auto mb-2 flex size-12 items-center justify-center rounded-full bg-destructive/10">
						<TriangleAlertIcon className="size-6 text-destructive" />
					</div>
					<AlertDialogTitle>{title}</AlertDialogTitle>
					<AlertDialogDescription className="text-center">
						{description}
					</AlertDialogDescription>
				</AlertDialogHeader>
				<AlertDialogFooter>
					<AlertDialogCancel onClick={() => onCancel?.()}>
						{cancelText || "Annulla"}
					</AlertDialogCancel>
					<AlertDialogAction onClick={() => onConfirm()} variant="destructive">
						{confirmText || "Conferma"}
					</AlertDialogAction>
				</AlertDialogFooter>
			</AlertDialogContent>
		</AlertDialog>
	);
};