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

const CreateBoardButtonMobile = () => {
    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,
                    },
                }}
            />
            <Box className={styles.spacer} />
        </>
    );
};

export default CreateBoardButtonMobile;