import { ReactNode } from 'react';

import { Box } from '@chakra-ui/react';
import { LuMenu } from 'react-icons/lu';

import { MenuContent, MenuItem, MenuRoot, MenuTrigger } from '../ui/menu';

export type MenuElement = {
  icon?: ReactNode;
  name: string;
  onClick: () => void;
};

export type ContextMenuProps = {
  elements?: MenuElement[];
};

export const ContextMenu = ({ elements }: ContextMenuProps) => {
  if (!elements) {
    return <></>;
  }
  return (
    <MenuRoot data-testid="context-menu">
      <MenuTrigger
        asChild
        marginY="auto"
        marginRight="4px"
        data-testid="context-menu_trigger"
      >
        <Box asChild color="brand.500" cursor="pointer">
          <LuMenu />
        </Box>
      </MenuTrigger>
      <MenuContent data-testid="context-menu_content">
        {elements?.map((data) => (
          <MenuItem
            key={data.name}
            value={data.name}
            onClick={data.onClick}
            height="65px"
            fontSize="25px"
            data-test-id="context-menu_item"
          >
            {data.icon}
            {data.name}
          </MenuItem>
        ))}
      </MenuContent>
    </MenuRoot>
  );
};