import React, { FC } from "react";
import { Stack } from "@mantine/core";
import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
import CreateProjectButton from "@/app/deals/drawers/ProjectsMobileEditorDrawer/components/CreateProjectButton";
import ProjectMobile from "@/app/deals/drawers/ProjectsMobileEditorDrawer/components/ProjectMobile";
import { ProjectSchema } from "@/lib/client";

type Props = {
    onSelect: (project: ProjectSchema | null) => void;
    onClose: () => void;
};

const ProjectsDrawerBody: FC<Props> = ({ onSelect, onClose }) => {
    const { projects } = useProjectsContext();

    return (
        <>
            <Stack gap={0}>
                {projects.map((project, index) => (
                    <ProjectMobile
                        key={index}
                        project={project}
                        onSelect={onSelect}
                        closeDrawer={onClose}
                    />
                ))}
            </Stack>
            <CreateProjectButton />
        </>
    );
};

export default ProjectsDrawerBody;
