import { cn } from "@/lib/utils";
import {
	AlertDialog,
	AlertDialogCancel,
	AlertDialogContent,
	AlertDialogDescription,
	AlertDialogFooter,
	AlertDialogHeader,
	AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";

interface ConfirmDialogProps {
	open: boolean;
	onOpenChange: (open: boolean) => void;
	title: React.ReactNode;
	disabled?: boolean;
	desc: React.JSX.Element | string;
	cancelBtnText?: string;
	confirmText?: React.ReactNode;
	destructive?: boolean;
	handleConfirm: () => void;
	isLoading?: boolean;
	className?: string;
	children?: React.ReactNode;
}

export function ConfirmDialog(props: ConfirmDialogProps) {
	const {
		title,
		desc,
		children,
		className,
		confirmText,
		cancelBtnText,
		destructive,
		isLoading,
		disabled = false,
		handleConfirm,
		...actions
	} = props;
	return (
		<AlertDialog {...actions}>
			<AlertDialogContent className={cn(className && className)}>
				<AlertDialogHeader className="text-left">
					<AlertDialogTitle>{title}</AlertDialogTitle>
					<AlertDialogDescription asChild>
						<div>{desc}</div>
					</AlertDialogDescription>
				</AlertDialogHeader>
				{children}
				<AlertDialogFooter>
					<AlertDialogCancel disabled={isLoading}>
						{cancelBtnText ?? "Cancel"}
					</AlertDialogCancel>
					<Button
						variant={destructive ? "destructive" : "default"}
						onClick={handleConfirm}
						disabled={disabled || isLoading}
					>
						{confirmText ?? "Continue"}
					</Button>
				</AlertDialogFooter>
			</AlertDialogContent>
		</AlertDialog>
	);
}