"use client";
import MainMenu from "@/components/mainMenu";
import React, { useState, useEffect } from "react";
import projectsData from '../../projects.json';
import { useSearchParams } from "next/navigation";
import Image from "next/image";export const dynamic = 'force-dynamic'
import Footer from "@/components/footer";


type project = {
    title: string,
    description: string,
    location: string,
    client: string,
    images: string[]
}

export default function Project() {
    const searchParams = useSearchParams();
    const [selectedProject, setSelectedProject] = useState<undefined | project>();
    const projectName = searchParams.get("project");
    const [isLoading, setIsLoading] = useState(true); // Add a loading state

    useEffect(() => {
        setIsLoading(true); // Set loading to true when the effect starts
        const project = projectsData.find(
            (proj) => proj.title.toLowerCase().replace(/ /g, '') === projectName?.toLowerCase()
        );
        setSelectedProject(project);
        setIsLoading(false); // Set loading to false after fetching (even if not found)
    }, []); // Re-run effect when projectName changes

    if (isLoading) {
        return (
            
        <div>Loading project details...</div>); // Or a more visually appealing loader
    }

    if (!selectedProject) {
        return (<div>Project not found.</div>); // Handle the case where the project doesn't exist
    }

    return (
        
        <div>
            <MainMenu/>
            <div className="mx-24 mt-28">
                <div className="flex flex-row justify-start py-8 items-center">
                    <p className=" cursor-pointer text-deeba-main" >{selectedProject.title}</p>
                    <p className="ml-8 cursor-pointer hover:text-deeba-main" >All</p>
                    <p className="ml-8 hover:text-deeba-main cursor-pointer">Residential</p>
                    <p className="ml-8 hover:text-deeba-main cursor-pointer">Commercial</p>
                    <p className="ml-8 hover:text-deeba-main cursor-pointer">Hospitality</p>
                </div>
                <div className="w-full h-[500px] bg-grey-darker mb-8 relative">
                    <Image alt={selectedProject.title} src={selectedProject.images[0]} layout="fill" objectFit="cover"/>
                </div>
                <div className="w-full flex flex-row justify-between items-center">
                    <p className="text-8xl font-light text-grey-darkest">{selectedProject.title}</p>
                    <div className="basis-1/2 flex flex-col items-end justify-between">
                        <p className="pl-4 text-sm text-right mb-4">{selectedProject.description}</p>
                        <div>
                            <p className="text-right font-light">{selectedProject.location}</p>
                            <p className="text-right font-light">{selectedProject.client}</p>
                        </div>
                    </div>
                </div>
                <div className="flex flex-row items-center w-full justify-between mt-6">
                    <div className="basis-1/2 mr-8 h-[500px] bg-grey-darker mb-8 relative">
                        <Image alt={selectedProject.title} src={selectedProject.images[1]}  objectFit="cover" layout="fill"/>
                    </div>
                    <div className="basis-1/2 ml-8 h-[500px] bg-grey-darker mb-8 relative">
                        <Image alt={selectedProject.title} src={selectedProject.images[2]}  objectFit="cover" layout="fill"/>
                    </div>
                </div>
                {
                    selectedProject.images.length === 3 ? <div></div>
                    : <div className="w-full h-[500px] bg-grey-darker mb-8 relative">
                    <Image alt={selectedProject.title} src={selectedProject.images[3]}  objectFit="cover" layout="fill"/>
                </div>
                }
            </div>
            <Footer/>
        </div>
        
    );
}