import { FC } from "react";
import { IconPlus } from "@tabler/icons-react";
import { Box, Group, Text } from "@mantine/core";
import { modals } from "@mantine/modals";
import { useStatusesMobileContext } from "@/app/deals/drawers/StatusesMobileEditorDrawer/contexts/BoardStatusesContext";

const CreateStatusButton: FC = () => {
    const { statusesCrud } = useStatusesMobileContext();

    const onStartCreating = () => {
        modals.openContextModal({
            modal: "enterNameModal",
            title: "Создание колонки",
            withCloseButton: true,
            innerProps: {
                onChange: statusesCrud.onCreate,
            },
        });
    };

    return (
        <Group
            ml={"xs"}
            onClick={onStartCreating}>
            <IconPlus />
            <Box mt={5}>
                <Text>Создать колонку</Text>
            </Box>
        </Group>
    );
};

export default CreateStatusButton;