import { IconPlus } from "@tabler/icons-react";
import { Box, Flex, rem } 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 { boardsCrud } = useBoardsContext();

    return (
        <Flex style={{ borderBottom: "2px solid gray" }}>
            <InPlaceInput
                placeholder={"Название доски"}
                onComplete={boardsCrud.onCreate}
                getChildren={startEditing => (
                    <Box
                        onClick={startEditing}
                        className={styles["create-button"]}>
                        <IconPlus />
                    </Box>
                )}
                inputStyles={{
                    wrapper: {
                        marginRight: "var(--mantine-spacing-xs)",
                        paddingBlock: rem(3),
                        paddingLeft: "var(--mantine-spacing-xs)",
                        backgroundColor:
                            "light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6))",
                        borderTopLeftRadius: "var(--mantine-spacing-xs)",
                        borderTopRightRadius: "var(--mantine-spacing-xs)",
                    },
                }}
                modalTitle={"Создание доски"}
            />
        </Flex>
    );
};

export default CreateBoardButton;