import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "@rakazo/ui-web";
import type { ReactNode } from "react";
import type { ContextMenuPosition } from "../BotContextMenu";

/** A dropdown menu opened at the pointer, for sidebar context menus. */
export function PointerMenu({
  position,
  label,
  onClose,
  children,
}: {
  position: ContextMenuPosition;
  label: string;
  onClose: () => void;
  children: ReactNode;
}) {
  return (
    <DropdownMenu
      open
      onOpenChange={(open) => {
        if (!open) onClose();
      }}
    >
      {/* Invisible anchor at the pointer position, mirroring the bot menu. */}
      <DropdownMenuTrigger
        render={
          <button
            type="button"
            tabIndex={-1}
            aria-hidden
            className="fixed size-0 p-0 opacity-0"
            style={{ left: position.x, top: position.y }}
          />
        }
      />
      <DropdownMenuContent aria-label={label} align="start" sideOffset={0} className="w-[220px]">
        {children}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}