import { IconPlus } from "@tabler/icons-react";
import { Box, Space } from "@mantine/core";
import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
import styles from "./CreateBoardButton.module.css";

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

    return (
        <>
            <InPlaceInput
                placeholder={"Название доски"}
                onComplete={onCreateBoard}
                getChildren={startEditing => (
                    <Box
                        onClick={startEditing}
                        className={styles["create-button"]}>
                        <IconPlus />
                    </Box>
                )}
                modalTitle={"Создание доски"}
                inputStyles={{
                    wrapper: {
                        marginLeft: 15,
                        marginRight: 15,
                    },
                }}
            />
            <Space className={styles.spacer} />
        </>
    );
};

export default CreateBoardButton;
