import React from "react";
import Fade from "../../Fade/Fade";
import { PositionProps } from "../Menu";
import MenuItem, { MenuItemProps } from "../MenuItem/MenuItem";
import StyledMenuList from "./StyledMenuList";

type MenuListProps = PositionProps & {
  className?: string;
  itemClassName?: string;
  items: MenuItemProps[];
  showMenu: boolean;
};

const MenuList: React.FC<MenuListProps> = ({
  className,
  itemClassName,
  items,
  showMenu,
  horizontal,
  horizontalOffset,
  vertical,
  verticalOffset,
}) => {
  return (
    <Fade showContent={showMenu}>
      <StyledMenuList
        className={className}
        horizontal={horizontal}
        horizontalOffset={horizontalOffset}
        vertical={vertical}
        verticalOffset={verticalOffset}
      >
        {items.map((item, index) => (
          <MenuItem
            key={index}
            className={itemClassName}
            clickHandler={item.clickHandler}
          >
            {item.children}
          </MenuItem>
        ))}
      </StyledMenuList>
    </Fade>
  );
};

export default MenuList;