import { type ActionMenuItem } from "./ActionMenu";
import { ContextMenu } from "./ContextMenu";
import { usePageMenu } from "./pageMenuSlot";

/** The page's background menu (./pageMenuSlot). Render it in the branch of the page it belongs to — while
 *  mounted, a right-click on the page's empty area opens it; unmounted (a loading or error state, a
 *  different mode of the page), the browser's menu stays. `items` mirror the page's toolbar. */
export function PageMenu({ ariaLabel, items }: { ariaLabel: string; items: ActionMenuItem[] }) {
  const menu = usePageMenu();
  return <ContextMenu menu={menu} ariaLabel={ariaLabel} items={menu.open ? items : []} />;
}