import { useEffect } from "react"; import { createPortal } from "react-dom"; // ✅ Insère la modale dans import CarouselCompetences from "./CarouselCompetences"; interface ModalGlossaireProps { mot: { mot_clef: string; description: string; images?: any[]; }; onClose: () => void; } export default function ModalGlossaire({ mot, onClose }: ModalGlossaireProps) { // 🔥 Désactiver le scroll du `body` quand la modale est ouverte useEffect(() => { document.body.classList.add("overflow-hidden"); return () => { document.body.classList.remove("overflow-hidden"); }; }, []); // ✅ Debug : Vérifier les images reçues console.log("🖼️ Images reçues dans la modale :", mot.images); // ✅ Vérifier si `mot.images` est bien un tableau et contient des images const images = mot.images?.map((img: any) => { return { url: `http://localhost:1337${img.formats?.large?.url || img.url}`, alt: img.name || "Illustration", }; }) || []; return createPortal(

{/* Bouton de fermeture */} {/* Titre */}

{mot.mot_clef}

{/* Description */}

{mot.description}

{/* 🚀 Carrousel d'images si disponible */} {images.length > 0 ? ( ) : (

Aucune image disponible

)}

, document.body // ✅ Fixe la modale au `body` pour qu'elle couvre toute la page ); }