import { Fragment } from 'react';

import HuMenu from '@material-hu/components/design-system/Menu';
import { MenuProps } from '@material-hu/components/design-system/Menu/types';

export type MenuOption = {
  id: string;
  option: JSX.Element | null;
  enabled: boolean;
};

export type GenericMenuProps = Pick<MenuProps, 'open' | 'anchorEl'> & {
  id: string;
  onClose: () => void;
  menuOptions: MenuOption[];
};

export const GenericMenu = (props: GenericMenuProps) => {
  const { id, open, anchorEl, onClose = () => null, menuOptions } = props;

  return (
    <HuMenu
      id={id}
      anchorEl={anchorEl}
      open={open}
      onClose={onClose}
    >
      {menuOptions.map(({ id: optionId, option }) => (
        <Fragment key={optionId}> {option} </Fragment>
      ))}
    </HuMenu>
  );
};
export default GenericMenu;