import SingleProject from "../SingleProject/SingleProject.jsx";
import "./Projects.css"
import React, {useEffect, useState} from "react";
import {Link, useLocation} from "react-router-dom";
import NavBar from "../NavBar/NavBar.jsx";

function Projects() {
    const [projects, setProjects] = useState([]);
    const [error, setError] = useState(null);
    const location = useLocation();

    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>Error retrieving data: {error}</div>;
    }

    if (location.pathname === '/') {
        return (
            <section id="projects-section">
                <h1 className="section-title">Projects</h1>
                <div className="projects-section-list">
                    {projects
                        .filter(project => project.id <= 3)
                        .map(project => (
                        <SingleProject
                            image={project.image_name}
                            title={project.title}
                            description={project.description}
                            skills={project.skills}
                            id={project.id}
                            nbImage={project.nb_image}
                        />
                    ))}
                </div>
                <div className="show-more-container">
                    <Link to="/projects" className="projects-link">Show more</Link>
                </div>
            </section>
        )
    }else if (location.pathname === '/projects') {
        return (
            <section id="projects-section">
                <div className="projects-section-header">
                    <NavBar />
                    <h1 className="section-title">All Projects</h1>
                    <p className="projects-section-subtitle">Here you can find a collection of my work.</p>
                </div>
                <div className="projects-section-list">
                    {projects.map(project => (
                        <SingleProject
                            image={project.image_name}
                            title={project.title}
                            description={project.description}
                            skills={project.skills}
                            id={project.id}
                            nbImage={project.nb_image}
                        />
                    ))}
                </div>
                <div className="projects-back-link">
                    <Link to="/" className="projects-link">← Back to Home</Link>
                </div>
            </section>
        )
    }else {
        return <div>Page inexistante</div>;
    }

}


export default Projects