import { Badge } from "@/components/ui/badge";
import type { ClaimStatus, RemittanceStatus } from "@/types";
import { cn } from "@/lib/utils";

const claimStyles: Record<ClaimStatus, { dot: string; label: string }> = {
  draft: { dot: "bg-muted-foreground", label: "Draft" },
  submitted: { dot: "bg-[hsl(var(--accent))]", label: "Submitted" },
  accepted: { dot: "bg-[hsl(var(--success))]", label: "Accepted" },
  denied: { dot: "bg-destructive", label: "Denied" },
  paid: { dot: "bg-[hsl(var(--success))]", label: "Paid" },
  pending: { dot: "bg-[hsl(var(--warning))]", label: "Pending" },
};

const remitStyles: Record<RemittanceStatus, { dot: string; label: string }> = {
  received: { dot: "bg-[hsl(var(--accent))]", label: "Received" },
  posted: { dot: "bg-[hsl(var(--warning))]", label: "Posted" },
  reconciled: { dot: "bg-[hsl(var(--success))]", label: "Reconciled" },
};

export function ClaimStatusBadge({ status }: { status: ClaimStatus }) {
  const s = claimStyles[status];
  return (
    <Badge variant="outline" className="bg-transparent border-border/60">
      <span className={cn("h-1.5 w-1.5 rounded-full", s.dot)} />
      <span className="font-normal">{s.label}</span>
    </Badge>
  );
}

export function RemitStatusBadge({ status }: { status: RemittanceStatus }) {
  const s = remitStyles[status];
  return (
    <Badge variant="outline" className="bg-transparent border-border/60">
      <span className={cn("h-1.5 w-1.5 rounded-full", s.dot)} />
      <span className="font-normal">{s.label}</span>
    </Badge>
  );
}