import React, {useEffect, useState} from "react";
import SingleProject from "../components/SingleProject.jsx";
function ProjectsPage() {
    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 (
        <div>
            <h1>Voici mes projets</h1>;
            {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>
    )
}
export default ProjectsPage;