BulkActionBar

"use client";

import { cn } from "@/lib/ledger/cn";
import { Button } from "@/components/ledger/button";

export interface BulkActionBarProps {
  /** Names the destruction: "Delete 42 transactions", never "Delete". */
  actions: { label: (count: number) => string; onClick: () => void; destructive?: boolean }[];
  className?: string;
  count: number;
  onClear: () => void;
}

/**
 * Bottom-anchored on phone with safe-area padding, inline on desktop.
 * Occasional, so the 240ms translate + fade is licensed.
 */
export function BulkActionBar({ count, actions, onClear, className }: BulkActionBarProps) {
  if (count === 0) return null;
  return (
    <div
      aria-label={`${count} selected`}
      className={cn(
        "ledger-enter fixed inset-x-4 bottom-4 z-dropdown flex flex-wrap items-center gap-3",
        "rounded-md border border-border bg-surface-raised px-4 py-3 shadow-elevation-3",
        "md:static md:inset-auto md:shadow-none",
        className,
      )}
      role="region"
      style={{ marginBottom: "env(safe-area-inset-bottom)" }}
    >
      <span className="numeric text-label font-medium">{count} selected</span>
      <div className="flex flex-wrap gap-2">
        {actions.map((a) => (
          <Button
            key={a.label(count)}
            onClick={a.onClick}
            size="sm"
            variant={a.destructive ? "destructive" : "secondary"}
          >
            {a.label(count)}
          </Button>
        ))}
      </div>
      <Button className="ml-auto" onClick={onClear} size="sm" variant="ghost">
        Clear selection
      </Button>
    </div>
  );
}