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 data = await GetSkills();

    // Support both array and object responses from the backend and merge all items if array
    let obj: Record<string, string[]> = {};
    if (Array.isArray(data)) {
        for (const item of data) {
            if (item && typeof item === "object") {
                for (const [category, items] of Object.entries(item as Record<string, unknown>)) {
                    if (Array.isArray(items)) {
                        obj[category] = [...(obj[category] ?? []), ...items.filter((x): x is string => typeof x === "string")];
                    }
                }
            }
        }
        // Deduplicate items per category
        obj = Object.fromEntries(
            Object.entries(obj).map(([k, arr]) => [k, Array.from(new Set(arr))])
        );
    } else if (data && typeof data === "object") {
        obj = data as Record<string, string[]>;
    }

    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>
    );
}