import { useEffect } from "react"; import { createPortal } from "react-dom"; // Insère la modale dans import { getApiUrl } from "../utils/getApiUrl"; // ✅ Import de l'URL dynamique import CarouselCompetences from "./CarouselCompetences"; // Importation du composant CarouselCompetences // ✅ Définition des propriétés du composant ModalGlossaire interface ImageData { url: string; formats?: { large?: { url: string }; }; name?: string; } interface GlossaireMot { mot_clef: string; // Mot-clé du glossaire description: string; // Description du mot-clé images?: ImageData[]; // Images associées au mot-clé } interface ModalGlossaireProps { mot: GlossaireMot; onClose: () => void; } // ✅ Composant principal ModalGlossaire export default function ModalGlossaire({ mot, onClose }: ModalGlossaireProps) { const apiUrl = getApiUrl(); // 🔥 Détection automatique de l'URL API // 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érification et mise à jour des URLs d'image avec `getApiUrl()` const images = mot.images?.map((img) => ({ url: `${apiUrl}${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 ); }