"use client";

import { Icon } from "@/components/ui/Icon";
import { usePopover } from "@/lib/ui/popover";

export type RowMenuItem = {
  label: string;
  icon: string;
  onSelect: () => void;
  danger?: boolean;
  /** Statt einer Aktion ein Link (z. B. Download). */
  href?: string;
};

/**
 * Kleines Menü an einer Zeile/Kachel. Öffnet über den Pfeil; es ist immer nur
 * ein Menü gleichzeitig offen (globaler Popover-Manager).
 */
export function RowMenu({ id, items }: { id: string; items: RowMenuItem[] }) {
  const { open, toggle, close, ref } = usePopover(`rowmenu-${id}`);

  return (
    <div className="relative" ref={ref}>
      <button
        className="vault-icon-btn"
        data-active={open}
        onClick={toggle}
        aria-haspopup="menu"
        aria-expanded={open}
        aria-label="Menü"
        title="Menü"
      >
        <Icon name="chevron" size={14} style={{ transform: "rotate(90deg)" }} />
      </button>

      {open ? (
        <div role="menu" className="row-menu card-sm pop-solid animate-in">
          {items.map((it) =>
            it.href ? (
              <a
                key={it.label}
                href={it.href}
                className="row-menu-item"
                onClick={close}
                role="menuitem"
              >
                <Icon name={it.icon} size={15} />
                {it.label}
              </a>
            ) : (
              <button
                key={it.label}
                className="row-menu-item"
                data-danger={it.danger}
                role="menuitem"
                onClick={() => {
                  close();
                  it.onSelect();
                }}
              >
                <Icon name={it.icon} size={15} />
                {it.label}
              </button>
            ),
          )}
        </div>
      ) : null}
    </div>
  );
}