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

/**
 * The badge a possible-duplicate row gets, right next to (or in place of)
 * its category badge - same inline confirm/reject shape as TransferBadge,
 * for the same reason: the decision belongs right where the row already is,
 * not behind a trip to a separate page.
 */
export function DuplicateBadge({
  suggested,
  onMerge,
  onDismiss,
  busy,
}: {
  /** The pending DuplicateCandidate this row is a side of. */
  suggested: DuplicateDto;
  onMerge: () => void;
  onDismiss: () => void;
  busy?: boolean;
}) {
  return (
    <span className="inline-flex items-center gap-1 text-[11px] pl-2 pr-1 py-0.5 rounded-full border bg-chart-yellow/10 text-chart-yellow border-chart-yellow/30">
      <Copy size={11} strokeWidth={1.75} className="shrink-0" aria-hidden />
      Duplicate?
      <button
        type="button"
        disabled={busy}
        aria-label="Merge - delete this duplicate"
        title="Merge - delete this duplicate"
        onClick={(e) => { e.stopPropagation(); onMerge(); }}
        className={cn("rounded-full p-0.5 hover:bg-chart-yellow/20 transition-colors", busy && "opacity-50")}
      >
        <Check size={11} strokeWidth={2} />
      </button>
      <button
        type="button"
        disabled={busy}
        aria-label="Not a duplicate, keep both"
        title="Not a duplicate, keep both"
        onClick={(e) => { e.stopPropagation(); onDismiss(); }}
        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>
  );
}