import React, { FC } from 'react';
import uniqueId from 'lodash/uniqueId';

import { MenuItemsProps } from '../types.d';
import { MenuItem } from './item';

export const MenuItems: FC<MenuItemsProps> = ({ data }) => {
  const hasMenuItemIcons = data.filter((item) => !!item.icon).length > 0;

  return (
    <>
      {data.map((item) => {
        // eslint-disable-next-line @typescript-eslint/unbound-method
        const { title, icon, onClick } = item;
        const isRenderEmptyIcon = hasMenuItemIcons && !icon;
        return (
          <MenuItem
            icon={icon}
            isRenderEmptyIcon={isRenderEmptyIcon}
            key={title?.toString() ?? uniqueId()}
            onClick={onClick}
            title={title}
          />
        );
      })}
    </>
  );
};
