async function GetSkills() {
    const res = await fetch(`${process.env.BACKEND_URL}/cv/skills`, {
        cache: process.env.CACHE
    });

    if (!res.ok) {
        throw new Error("Erreur lors du chargement des skills du CV");
    }
    return res.json();
}
export default async function Skills(){
    const skills = await GetSkills();

    const obj: Record<string, string[]> = Array.isArray(skills) ? (skills[0] ?? {}) : {};
    const entries = Object.entries(obj) as [string, string[]][];

    if (entries.length === 0) {
        return (
            <section id="skills" className="section">
                <div className="container">
                    <h2 className="section-title">Mes compétences</h2>
                    <p className="u-muted">Aucune compétence à afficher.</p>
                </div>
            </section>
        );
    }

    return (
        /*
        *
            {mySkillsEntries.length > 0 && (
                <section id="competences" className="section">
                    <div className="container">
                        <h2 className="section-title">Compétences clés</h2>
                        <ul className="skill-grid">
                            {mySkillsEntries.map(([category, items]) => (
                                <li key={category} className="skill-card">
                                    <h3 className="skill-card__title">{category}</h3>
                                    <div className="skill-card__tags">
                                        {items.map((it) => (
                                            <span key={it} className="badge">{it}</span>
                                        ))}
                                    </div>

                                    <div className="skill-meter" aria-hidden="true">
                                        <div className="skill-meter__bar" style={{["--level" as any]: "75%"}}/>
                                    </div>
                                </li>
                            ))}
                        </ul>
                    </div>
                </section>
            )}
        * */
        <section id="competences" className="section">
            <div className="container">
                <h2 className="section-title">Mes compétences</h2>
                <ul className="skill-grid">
                    {entries.map(([category, skills]) => (
                        <li key={category} className="skill-card">
                            <h3 className="skill-card__title">{category}</h3>
                            <div className="skill-card__tags">
                                {skills.map((skill: string) => (
                                    <span key={skill} className="badge">{skill}</span>
                                ))}
                            </div>
                        </li>
                    ))}
                </ul>
            </div>
        </section>
    );
}