"use client";

import { CheckCircle2 } from "lucide-react";
import { useRouter } from "next/navigation";

interface AvenantSuccessModalProps {
  isOpen: boolean;
  numeroAvenant: string;
  avenantId: string;
}

export default function AvenantSuccessModal({
  isOpen,
  numeroAvenant,
  avenantId,
}: AvenantSuccessModalProps) {
  const router = useRouter();

  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-8">
          <div className="flex flex-col items-center text-center">
            <div className="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mb-4">
              <CheckCircle2 className="w-8 h-8 text-green-600" />
            </div>
            
            <h3 className="text-xl font-semibold text-slate-900 mb-2">
              Avenant créé avec succès !
            </h3>
            
            <p className="text-sm text-slate-600 mb-6">
              L'avenant <span className="font-semibold text-slate-900">{numeroAvenant}</span> a été créé et le contrat a été mis à jour.
            </p>

            <div className="flex gap-3 w-full">
              <button
                onClick={() => router.push("/staff/avenants")}
                className="flex-1 px-4 py-2 border border-slate-300 text-slate-700 rounded-lg hover:bg-slate-50 transition-colors"
              >
                Liste des avenants
              </button>
              <button
                onClick={() => router.push(`/staff/avenants/${avenantId}`)}
                className="flex-1 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors"
              >
                Voir l'avenant
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
