"use client";
import { useEffect, useState } from "react";
import { fetchDataCompetences, fetchDataGlossaire } from "../utils/fetchDataCompetences";
import ContentSectionCompetences from "./ContentSectionCompetences";
interface ContentSectionProps {
collection: string;
slug: string;
titleClass?: string;
contentClass?: string;
}
/**
* Orchestre le fetch compétence + glossaire et transmet les données au rendu.
* Le rendu (`ContentSectionCompetences`) gère son propre état "non trouvé" en
* feuillet vellum — on s'aligne ici sur le même gabarit pour l'état de
* chargement (étape 7.c).
*/
export default function ContentSectionCompetencesContainer({
collection,
slug,
}: ContentSectionProps) {
const [competenceData, setCompetenceData] = useState(null);
const [glossaireData, setGlossaireData] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
async function fetchData() {
setLoading(true);
try {
const competence = await fetchDataCompetences(collection, slug);
setCompetenceData(competence);
const glossaire = await fetchDataGlossaire();
setGlossaireData(glossaire);
} catch (error) {
console.error("❌ [ContentSectionCompetencesContainer] Erreur lors de la récupération des données :", error);
} finally {
setLoading(false);
}
}
fetchData();
}, [collection, slug]);
if (loading) {
return (
);
}
return (
);
}