Popover Menu

"use client";

import type { ReactNode } from "react";
import { DropdownMenu as DM } from "radix-ui";
import { cn } from "@/lib/utils";

export interface PopoverMenuItem {
  label?: string;
  emoji?: string;
  hint?: string;
  danger?: boolean;
  separator?: boolean;
  onSelect?: () => void;
}

export interface PopoverMenuProps {
  trigger: ReactNode;
  items?: PopoverMenuItem[];
  align?: "start" | "center" | "end";
  da?: string;
}

/** Rounded dropdown menu (Radix DropdownMenu): emoji items with hints, soft highlight, separators and a red danger item; pops in with a bounce. */
export function PopoverMenu({
  trigger,
  items = [
    { label: "Rename", emoji: "✏️", hint: "R" },
    { label: "Duplicate", emoji: "📄", hint: "D" },
    { label: "Change color", emoji: "🎨" },
    { label: "Move to…", emoji: "📦" },
    { separator: true },
    { label: "Archive", emoji: "🗄️" },
    { label: "Delete board", emoji: "🗑️", danger: true },
  ],
  align = "end",
  da = "soft-flat",
}: PopoverMenuProps) {
  return (
    <DM.Root>
      <DM.Trigger asChild>{trigger}</DM.Trigger>
      <DM.Portal>
        <DM.Content
          data-da={da}
          align={align}
          sideOffset={8}
          collisionPadding={12}
          className="z-50 min-w-56 rounded-da-lg bg-da-surface p-2 text-da-surface-fg shadow-da-lg transition-[opacity,scale] duration-(--da-duration) ease-da-emphasized starting:scale-90 starting:opacity-0"
        >
          {items.map((it, i) =>
            it.separator ? (
              <DM.Separator key={i} className="mx-2 my-1.5 h-px bg-da-border" />
            ) : (
              <DM.Item
                key={i}
                onSelect={it.onSelect}
                className={cn(
                  "flex cursor-default items-center gap-3 rounded-da-md px-3 py-2.5 text-[15px] font-medium outline-none select-none data-highlighted:bg-da-surface-2",
                  it.danger && "text-da-danger data-highlighted:bg-da-danger/10",
                )}
              >
                {it.emoji && <span aria-hidden>{it.emoji}</span>}
                {it.label}
                {it.hint && <kbd className="ml-auto rounded-da-sm bg-da-surface-2 px-1.5 font-da-mono text-xs text-da-muted-fg">{it.hint}</kbd>}
              </DM.Item>
            ),
          )}
        </DM.Content>
      </DM.Portal>
    </DM.Root>
  );
}

export default PopoverMenu;