import React, { FC } from "react";
import { IconDotsVertical, IconEdit, IconTrash } from "@tabler/icons-react";
import { Box, Group, Menu, Text } from "@mantine/core";
import ThemeIcon from "@/components/ui/ThemeIcon/ThemeIcon";
import { BoardSchema } from "@/lib/client";

type Props = {
    board: BoardSchema;
    startEditing: () => void;
    onDeleteBoard: (board: BoardSchema) => void;
    isHovered?: boolean;
};

const BoardMenu: FC<Props> = ({
    board,
    startEditing,
    onDeleteBoard,
    isHovered = true,
}) => {
    return (
        <Menu>
            <Menu.Target>
                <Box
                    style={{
                        opacity: isHovered ? 1 : 0,
                        cursor: "pointer",
                    }}
                    onClick={e => e.stopPropagation()}>
                    <ThemeIcon size={"sm"}>
                        <IconDotsVertical />
                    </ThemeIcon>
                </Box>
            </Menu.Target>
            <Menu.Dropdown>
                <Menu.Item
                    onClick={e => {
                        e.stopPropagation();
                        startEditing();
                    }}>
                    <Group wrap={"nowrap"}>
                        <IconEdit />
                        <Text>Переименовать</Text>
                    </Group>
                </Menu.Item>
                <Menu.Item
                    onClick={e => {
                        e.stopPropagation();
                        onDeleteBoard(board);
                    }}>
                    <Group wrap={"nowrap"}>
                        <IconTrash />
                        <Text>Удалить</Text>
                    </Group>
                </Menu.Item>
            </Menu.Dropdown>
        </Menu>
    );
};

export default BoardMenu;
