import SingleProject from "./SingleProject.jsx";
import "../styles/Projects.css"
import React, {useEffect, useState} from "react";
function Projects() {
    const [projects, setProjects] = useState([]);
    const [error, setError] = useState(null);

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

    if (error) {
        return <div>Erreur lors de la récupération des données : {error}</div>;
    }


    return (
        <section id="projects-section">
            <h1 className="section-title">Projects</h1>
            <div className="projects-section-list">
                {projects.map(project => (
                    <SingleProject image={project.image_name} title={project.title} description={project.description} skills={project.skills} color={project.color} nbImage={project.nb_image}/>
                ))}
            </div>
            <div className="show-more-container">
                <p className="show-more-link">
                    Show more
                </p>
            </div>
        </section>
    )
}


export default Projects