ExportMenu

"use client";

import { Menu } from "@base-ui-components/react/menu";
import { cn } from "@/lib/ledger/cn";
import { ArrowDownTrayIcon } from "@/components/ledger/icons";

export interface ExportMenuProps {
  className?: string;
  onExport: (format: "csv" | "xlsx" | "pdf") => void;
  /** Stated explicitly — exporting the page when the user expected the full
      filtered set is a silent data error. */
  scopeCount: number;
  scopeDescription: string;
}

export function ExportMenu({ scopeCount, scopeDescription, onExport, className }: ExportMenuProps) {
  return (
    <Menu.Root>
      <Menu.Trigger
        className={cn(
          "inline-flex h-8 items-center gap-2 rounded-sm border border-border bg-surface px-3 text-label font-medium",
          "transition-colors duration-1 ease-standard hover:bg-surface-hover",
          className,
        )}
      >
        <ArrowDownTrayIcon aria-hidden="true" className="size-3.5" />
        Export
      </Menu.Trigger>
      <Menu.Portal>
        <Menu.Positioner align="end" className="z-dropdown" sideOffset={8}>
          <Menu.Popup
            className="w-[280px] rounded-md border border-border bg-surface-raised p-1 shadow-elevation-3"
            style={{ transformOrigin: "var(--transform-origin)" }}
          >
            <p className="px-3 py-2 text-caption text-text-secondary">
              Exports <span className="numeric font-medium">{scopeCount.toLocaleString()}</span>{" "}
              {scopeDescription}. The resolved period and filters are written into the file header.
            </p>
            {(["csv", "xlsx", "pdf"] as const).map((f) => (
              <Menu.Item
                className="cursor-pointer rounded-xs px-3 py-2 text-body outline-none data-[highlighted]:bg-surface-hover"
                key={f}
                onClick={() => onExport(f)}
              >
                Export as {f.toUpperCase()}
              </Menu.Item>
            ))}
          </Menu.Popup>
        </Menu.Positioner>
      </Menu.Portal>
    </Menu.Root>
  );
}