import React from "react";
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
} from "@/Components/ui/alert-dialog";
import { cn } from "@/lib/utils";
import { AlertTriangle, Info } from "lucide-react";

export default function ConfirmModal({ 
    open, 
    onOpenChange, 
    onConfirm, 
    title = "Are you sure?", 
    description = "This action cannot be undone.",
    confirmText = "Continue",
    cancelText = "Cancel",
    variant = "default",
    icon: CustomIcon
}) {
    const isDestructive = variant === 'destructive';
    const Icon = CustomIcon || (isDestructive ? AlertTriangle : Info);

    return (
        <AlertDialog open={open} onOpenChange={onOpenChange}>
            <AlertDialogContent className="sm:max-w-[425px] p-0 overflow-hidden">
                <div className="p-6">
                    <div className="flex flex-col sm:flex-row gap-4 sm:gap-5">
                        
                        {/* --- Icon Section --- */}
                        <div className={cn(
                            "mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10",
                            isDestructive ? "bg-red-100 dark:bg-red-500/20" : "bg-primary/10"
                        )}>
                            <Icon className={cn(
                                "h-6 w-6 sm:h-5 sm:w-5",
                                isDestructive ? "text-red-600 dark:text-red-500" : "text-primary"
                            )} />
                        </div>

                        {/* --- Text Section --- */}
                        <AlertDialogHeader className="text-center sm:text-start space-y-1.5">
                            <AlertDialogTitle className="text-lg font-semibold tracking-tight">
                                {title}
                            </AlertDialogTitle>
                            <AlertDialogDescription className="text-sm text-muted-foreground leading-relaxed">
                                {description}
                            </AlertDialogDescription>
                        </AlertDialogHeader>

                    </div>
                </div>

                {/* --- Footer Section --- */}
                <div className="bg-muted/50 px-6 py-4 flex flex-col-reverse sm:flex-row sm:justify-end gap-2 border-t">
                    <AlertDialogCancel className="mt-0 border-muted-foreground/20 hover:bg-muted">
                        {cancelText}
                    </AlertDialogCancel>
                    <AlertDialogAction 
                        onClick={onConfirm} 
                        className={cn(
                            "shadow-sm transition-colors",
                            isDestructive 
                                ? "bg-red-600 text-white hover:bg-red-700 dark:bg-red-600 dark:hover:bg-red-700" 
                                : "bg-primary text-primary-foreground hover:bg-primary/90"
                        )}
                    >
                        {confirmText}
                    </AlertDialogAction>
                </div>
            </AlertDialogContent>
        </AlertDialog>
    );
}