// Shared visual primitives used by ClaimCard837 and ClaimCard835.
//
// Both cards render validation status (Passed / Warnings / Failed) and
// a grid of stat pills (Member, Place of service, …). The exact same
// mark-up was being copy-pasted inside Upload.tsx for both cards; this
// file is the shared home.

import { AlertTriangle, CheckCircle2, XCircle } from "lucide-react";
import { cn } from "@/lib/utils";

/**
 * Tri-state validation indicator.
 *
 * - `passed` → green "Passed" with check icon
 * - `hasWarnings` → amber "Warnings" with triangle
 * - else → red "Failed" with X
 */
export function ValidationDot({
  passed,
  hasWarnings,
}: {
  passed: boolean;
  hasWarnings?: boolean;
}) {
  if (passed) {
    return (
      <span
        className="inline-flex items-center gap-1.5 mono text-[10.5px] uppercase tracking-[0.12em] text-[hsl(var(--success))] font-medium"
        title="Validation passed"
      >
        <CheckCircle2 className="h-3.5 w-3.5" strokeWidth={1.75} />
        Passed
      </span>
    );
  }
  if (hasWarnings) {
    return (
      <span
        className="inline-flex items-center gap-1.5 mono text-[10.5px] uppercase tracking-[0.12em] text-[hsl(var(--warning))] font-medium"
        title="Validation passed with warnings"
      >
        <AlertTriangle className="h-3.5 w-3.5" strokeWidth={1.75} />
        Warnings
      </span>
    );
  }
  return (
    <span
      className="inline-flex items-center gap-1.5 mono text-[10.5px] uppercase tracking-[0.12em] text-destructive font-medium"
      title="Validation failed"
    >
      <XCircle className="h-3.5 w-3.5" strokeWidth={1.75} />
      Failed
    </span>
  );
}

/**
 * Small label + value cell for the expanded-card detail grid.
 */
export function StatPill({
  label,
  value,
  mono = true,
}: {
  label: string;
  value: React.ReactNode;
  mono?: boolean;
}) {
  return (
    <div className="flex flex-col gap-1">
      <div className="mono text-[10px] uppercase tracking-[0.18em] font-semibold text-muted-foreground/70">
        {label}
      </div>
      <div
        className={cn(
          "text-[13px]",
          mono && "display mono"
        )}
        style={{ color: "hsl(var(--surface-ink))" }}
      >
        {value}
      </div>
    </div>
  );
}
