import React, { FC, MouseEventHandler, ReactNode } from "react";
import { Group, Menu, Text } from "@mantine/core";

type Props = {
    onClick: MouseEventHandler<HTMLButtonElement>;
    icon: ReactNode;
    label: string;
    disabled?: boolean;
};

const DropdownMenuItem: FC<Props> = ({
    icon,
    label,
    onClick,
    disabled = false,
}) => {
    const onClickWrapper: MouseEventHandler<HTMLButtonElement> = e => {
        e.stopPropagation();
        if (disabled) return;
        onClick(e);
    };

    return (
        <Menu.Item
            onClick={onClickWrapper}
            disabled={disabled}>
            <Group wrap={"nowrap"}>
                {icon}
                <Text>{label}</Text>
            </Group>
        </Menu.Item>
    );
};

export default DropdownMenuItem;
