"use client";

import { AlertTriangle, Check, X } from "lucide-react";
import { Button } from "./button";

interface ConfirmationModalProps {
  isOpen: boolean;
  title: string;
  description: string;
  confirmText?: string;
  cancelText?: string;
  onConfirm: () => void;
  onCancel: () => void;
  confirmButtonVariant?: "default" | "destructive" | "gradient";
  isLoading?: boolean;
}

export function ConfirmationModal({ 
  isOpen, 
  title, 
  description,
  confirmText = "Confirmer",
  cancelText = "Annuler",
  onConfirm,
  onCancel,
  confirmButtonVariant = "default",
  isLoading = false
}: ConfirmationModalProps) {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center">
      <div className="bg-white rounded-2xl max-w-md w-full mx-4 shadow-2xl border">
        <div className="p-6">
          <div className="flex items-center gap-3 mb-4">
            <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
              <AlertTriangle className="w-5 h-5 text-blue-600" />
            </div>
            <h2 className="text-lg font-semibold text-slate-900">{title}</h2>
          </div>
          
          <div className="text-slate-600 mb-6">
            <p>{description}</p>
          </div>
          
          <div className="flex gap-3">
            <Button 
              variant="outline" 
              onClick={onCancel}
              className="flex-1"
              disabled={isLoading}
            >
              <X className="w-4 h-4 mr-2" />
              {cancelText}
            </Button>
            <Button 
              onClick={onConfirm}
              className={`flex-1 ${
                confirmButtonVariant === "gradient" 
                  ? "bg-gradient-to-r from-indigo-200 via-purple-200 to-pink-200 text-black hover:from-indigo-300 hover:via-purple-300 hover:to-pink-300" 
                  : confirmButtonVariant === "destructive"
                    ? "bg-red-500 hover:bg-red-600 text-white"
                    : ""
              }`}
              disabled={isLoading}
            >
              <Check className="w-4 h-4 mr-2" />
              {isLoading ? "En cours..." : confirmText}
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}