"use client";

import React, { FC } from "react";
import { Center, Divider, Drawer, rem, Text } from "@mantine/core";
import { ProjectsContextProvider } from "@/app/deals/contexts/ProjectsContext";
import ProjectsDrawerBody from "@/app/deals/drawers/StatusesMobileEditorDrawer/components/ProjectsDrawerBody";
import { DrawerProps } from "@/drawers/types";
import { ProjectSchema } from "@/lib/client";

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

const ProjectsMobileEditorDrawer: FC<DrawerProps<Props>> = ({
    opened,
    onClose,
    props: { onSelect },
}) => {
    return (
        <Drawer
            size={"100%"}
            position={"left"}
            onClose={onClose}
            removeScrollProps={{ allowPinchZoom: true }}
            withCloseButton={false}
            opened={opened}
            trapFocus={false}
            styles={{
                body: {
                    height: "100%",
                    display: "flex",
                    flexDirection: "column",
                    gap: rem(10),
                },
            }}>
            <Center>
                <Text>Проекты</Text>
            </Center>
            <Divider />
            <ProjectsContextProvider>
                <ProjectsDrawerBody
                    onSelect={onSelect}
                    onClose={onClose}
                />
            </ProjectsContextProvider>
        </Drawer>
    );
};

export default ProjectsMobileEditorDrawer;
