import { MENU_SURFACE, MenuItemList, type ActionMenuItem } from "./ActionMenu";
import { PopoverSurface } from "./AnchoredPopover";
import { type ContextMenuController } from "./useContextMenu";

/** The menu surface for a `useContextMenu` controller. Render ONE per list, outside the rows. */
export function ContextMenu<T>({
  menu,
  ariaLabel,
  items,
}: {
  menu: ContextMenuController<T>;
  /** Accessible name for the panel — a context menu has no visible trigger to take one from. */
  ariaLabel: string;
  items: readonly ActionMenuItem[];
}) {
  return (
    <PopoverSurface
      popover={menu.popover}
      ariaLabel={ariaLabel}
      className={`${MENU_SURFACE} overflow-y-auto`}
      style={{ maxHeight: "min(28rem, var(--fit-max-h))" }}
    >
      <MenuItemList items={items} onClose={menu.close} />
    </PopoverSurface>
  );
}