import { ReactNode, useState } from 'react';

import { LuMenu } from 'react-icons/lu';
import { MenuContent, MenuItem, MenuRoot, MenuTrigger } from '../ui/menu';
import { Button } from '../ui/button';


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">
        {/* This is very stupid, we need to set as span to prevent a button in button... WTF */}
        <Button variant="ghost" color="brand.500">
          <LuMenu />
        </Button>
      </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 >
  );
};