import React, { useState, useEffect } from 'react';
import SkillCard from "../SkillCard/SkillCard.jsx";
import "./Skills.css";

function Skills() {
    const [skills, setSkills] = useState([]);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchSkills = async () => {
            try {
                const response = await fetch('/api/skills/');
                if (!response.ok) {
                    throw new Error(`Erreur HTTP: ${response.status}`);
                }
                const data = await response.json();
                setSkills(data.data);
            } catch (err) {
                setError(err.message);
            }
        };
        fetchSkills();
    }, []);

    if (error) {
        return <div>Error retrieving data: {error}</div>;
    }

    const uniqueSkillTypes = [...new Set(skills.map(skill => skill.type))];


    return (
        <section id="skills-section">
            <h1 className="section-title">Skills</h1>
            {uniqueSkillTypes.map(type => (
                <div id="languages" className="skill-category">
                    <h2>{type}</h2>
                    <div className="skills">
                        {skills
                            .filter(skill => skill.type === type)
                            .map(skill => (
                                <SkillCard text={skill.name}/>
                            ))}
                    </div>
                </div>
            ))}
        </section>
    )
}


export default Skills