import { useParams } from "react-router-dom";
import React, { useEffect, useState } from "react";
import NavBar from "../components/NavBar/NavBar.jsx";
import ProjectDetails from "../components/ProjectDetails/ProjectDetails.jsx";
import Footer from "../components/Footer/Footer.jsx";

function ProjectDetailsPage() {
    const { id } = useParams();
    const [project, setProject] = useState([]);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchProject = async () => {
            try {
                const response = await fetch(`/api/longProjects/${id}`);
                if (!response.ok) {
                    throw new Error(`Erreur HTTP: ${response.status}`);
                }
                const data = await response.json();
                setProject(data);
            } catch (err) {
                setError(err.message);
            }
        };

        fetchProject();
    }, [id]);

    if (error) {
        return <p>Erreur : {error}</p>;
    }


    return (
        <div>
            <ProjectDetails project={project}/>
            <Footer/>
        </div>
    );
}

export default ProjectDetailsPage;