'use client';

import { ReactNode, useEffect, useState } from 'react';
import { createPortal } from 'react-dom';

interface CandidateAuthModalProps {
  onClose: () => void;
  children?: ReactNode;
}

export default function CandidateAuthModal({
  onClose,
  children,
}: CandidateAuthModalProps) {
  const [mounted, setMounted] = useState(false);

  // Garantit l’exécution uniquement côté client
  useEffect(() => {
    setMounted(true);
    return () => setMounted(false);
  }, []);

  if (!mounted) return null;

  return createPortal(
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
      aria-modal="true"
      role="dialog"
    >
      {/* BACKDROP */}
      <div
        className="absolute inset-0"
        onClick={onClose}
        aria-hidden="true"
      />

      {/* MODALE */}
      <div className="relative z-10 w-full max-w-md rounded-xl bg-white p-6 shadow-xl">
        <div className="flex justify-between items-center mb-4">
          <h2 className="text-lg font-semibold">
            Connexion candidat
          </h2>
          <button
            onClick={onClose}
            aria-label="Fermer"
            className="text-gray-500 hover:text-gray-700"
          >
            ✕
          </button>
        </div>

        {/* CONTENU */}
        <div>
          {children ?? (
            <p className="text-sm text-gray-600">
              Formulaire de connexion candidat
            </p>
          )}
        </div>
      </div>
    </div>,
    document.body
  );
}