import { ArrowLeftRight, Check, X } from "lucide-react";
import type { TransferDto } from "@/lib/api";
import { cn } from "@/lib/utils";

/**
 * The badge a transfer-matched row gets in place of (or alongside) its
 * category badge. A still-`suggested` match carries inline confirm/reject
 * icons, matching Sure's "Auto-matched badge" pattern; a `confirmed` one is
 * just a plain label, there's nothing left to decide.
 */
export function TransferBadge({
  suggested,
  onConfirm,
  onReject,
  busy,
}: {
  /** The pending Transfer this row is a leg of, or undefined if it's already confirmed. */
  suggested?: TransferDto;
  onConfirm: () => void;
  onReject: () => void;
  busy?: boolean;
}) {
  if (!suggested) {
    return (
      <span className="inline-flex items-center gap-1 text-[11px] px-2 py-0.5 rounded-full border bg-muted/60 text-muted-foreground border-border">
        <ArrowLeftRight size={11} strokeWidth={1.75} className="shrink-0" aria-hidden />
        Transfer
      </span>
    );
  }
  return (
    <span className="inline-flex items-center gap-1 text-[11px] pl-2 pr-1 py-0.5 rounded-full border bg-primary/10 text-primary border-primary/30">
      <ArrowLeftRight size={11} strokeWidth={1.75} className="shrink-0" aria-hidden />
      Transfer?
      <button
        type="button"
        disabled={busy}
        aria-label="Confirm this is a transfer"
        onClick={(e) => { e.stopPropagation(); onConfirm(); }}
        className={cn("rounded-full p-0.5 hover:bg-primary/20 transition-colors", busy && "opacity-50")}
      >
        <Check size={11} strokeWidth={2} />
      </button>
      <button
        type="button"
        disabled={busy}
        aria-label="Not a transfer"
        onClick={(e) => { e.stopPropagation(); onReject(); }}
        className={cn("rounded-full p-0.5 hover:bg-destructive/20 hover:text-destructive transition-colors", busy && "opacity-50")}
      >
        <X size={11} strokeWidth={2} />
      </button>
    </span>
  );
}