import { IconPlus } from "@tabler/icons-react";
import { Box } from "@mantine/core";
import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
import SmallPageBlock from "@/components/layout/SmallPageBlock/SmallPageBlock";
import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";

const CreateBoardButton = () => {
    const { onCreateBoard } = useBoardsContext();

    return (
        <SmallPageBlock style={{ cursor: "pointer" }}>
            <InPlaceInput
                placeholder={"Название доски"}
                onComplete={onCreateBoard}
                getChildren={startEditing => (
                    <Box
                        p={"sm"}
                        onClick={startEditing}>
                        <IconPlus />
                    </Box>
                )}
                modalTitle={"Создание доски"}
                inputStyles={{
                    wrapper: {
                        marginLeft: 15,
                        marginRight: 15,
                    },
                }}
            />
        </SmallPageBlock>
    );
};

export default CreateBoardButton;