import React from "react";
import classNames from "classnames";
import { bem } from "../../utilities/bem";
import { MenuRenderer, MenuProps } from "../MenuRenderer";
import { PopoverMenu } from "../PopoverMenu";
import { MenuItem } from "./MenuItem";

const cn = "Menu";

export const Menu = ({
  children,
  trigger,
  className,
  placement = "bottom-start",
  ...rest
}: MenuProps) => {
  return (
    <MenuRenderer
      className={classNames(bem(cn), className)}
      placement={placement}
      trigger={trigger}
      {...rest}
    >
      {({ listProps }) => (
        <PopoverMenu className="w-full" {...listProps}>
          {children}
        </PopoverMenu>
      )}
    </MenuRenderer>
  );
};

Menu.Item = MenuItem;