import { useState } from 'react';

import {
  IconButton,
  Menu,
  MenuButton,
  MenuItem,
  MenuList,
} from '@chakra-ui/react';
import { LuMenu } from 'react-icons/lu';

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

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

export const ContextMenu = ({ elements }: ContextMenuProps) => {
  if (!elements) {
    return <></>;
  }
  return (
    <Menu>
      <MenuButton
        as={IconButton}
        aria-label="Options"
        icon={<LuMenu />}
        marginY="auto"
      />
      <MenuList>
        {elements?.map((data) => (
          <MenuItem key={data.name} onClick={data.onClick}>
            {data.name}
          </MenuItem>
        ))}
      </MenuList>
    </Menu>
  );
};
