import { useState } from "react";
import ProjectList from "./project-list/project-list";
import ProjectContent from "./project-content/project-content";
import {
    getCurrentProjectContent,
    getProjectList,
} from "../../lib/project-content/getShrimps";

export default function ShrimpProjects() {
    const [project, setProject] = useState("biotama");
    const [projectContent, setProjectContent] = useState(
        getCurrentProjectContent(project)
    );
    const [projectList, setProjectlist] = useState(getProjectList(project));

    const handleProjectClick = (newProject: string) => {
        setProject(newProject);
        setProjectlist(getProjectList(newProject));
        setProjectContent(getCurrentProjectContent(newProject));
    };

    const projectListProps = {
        projects: projectList,
        handleProjectClick: handleProjectClick,
    };

    return (
        <section className="bg-space-shrimp-blue pb-5 lg:px-25 px-5 wave-border">
            <ProjectList {...projectListProps} />
            <ProjectContent {...projectContent}>
                {projectContent.content}
            </ProjectContent>
        </section>
    );
}