import { type Ref } from "react";
import { MoreHorizontal } from "lucide-react";
import { IconButton } from "./IconButton";
import { type IconButtonSize, type IconButtonVariant } from "./buttonStyles";

// The visible door to an object's ONE action list (docs/DESIGN.md "Action placement", C1): the "…"
// that opens the same menu as a right-click, a long-press and Shift+F10, so no action is reachable
// only by a gesture. It carries no menu of its own — `menuProps` is the list's
// `useContextMenu().buttonProps(row)`, and `expanded` says whether THIS row's menu is the open one.
export function MoreButton({
  label,
  expanded,
  menuProps,
  variant = "ghost",
  size = "sm",
  className,
  ref,
}: {
  /** The menu's name ("Video actions"): the button's accessible name and tooltip. */
  label: string;
  expanded: boolean;
  menuProps: Record<string, unknown>;
  variant?: IconButtonVariant;
  size?: IconButtonSize;
  className?: string;
  /** For a caller that hands the focus back here — an in-place rename the menu opened. */
  ref?: Ref<HTMLButtonElement>;
}) {
  return (
    <IconButton
      ref={ref}
      variant={variant}
      size={size}
      label={label}
      aria-expanded={expanded}
      className={className}
      {...menuProps}
    >
      <MoreHorizontal />
    </IconButton>
  );
}