import { Button, cn, Icon, Menu, MenuContent, MenuItem as Item, MenuTrigger, type IconName } from "./kit";

export type MenuItem = { label: string; icon?: IconName; danger?: boolean; onSelect: () => void };

/** The row's ⋯ menu: arrow keys, Home and End, typing to jump, and Escape back to the button. */
export function RowMenu({ label, items, className }: { label: string; items: MenuItem[]; className?: string }) {
  if (!items.length) return null;
  return (
    <Menu>
      <MenuTrigger asChild>
        <Button
          variant="ghost"
          size="icon-sm"
          aria-label={label}
          onClick={(e) => e.stopPropagation()}
          className={cn(
            "text-cell opacity-60 group-hover:opacity-100 focus-visible:opacity-100 data-[state=open]:bg-quiet data-[state=open]:opacity-100",
            className,
          )}
        >
          <Icon name="more-2-line" size={17} />
        </Button>
      </MenuTrigger>
      <MenuContent align="end" aria-label={label} onClick={(e) => e.stopPropagation()}>
        {items.map((item) => (
          <Item key={item.label} icon={item.icon} tone={item.danger ? "danger" : "default"} onSelect={item.onSelect}>
            {item.label}
          </Item>
        ))}
      </MenuContent>
    </Menu>
  );
}