import { useEffect } from "react"; import { createPortal } from "react-dom"; // Insère la modale dans import CarouselCompetences from "./CarouselCompetences"; // Importation du composant CarouselCompetences pour afficher les images // Définition des propriétés du composant ModalGlossaire interface ModalGlossaireProps { mot: { mot_clef: string; // Mot-clé du glossaire description: string; // Description du mot-clé images?: any[]; // Images associées au mot-clé }; onClose: () => void; // Fonction pour fermer la modale } // Composant principal ModalGlossaire 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 ); }