import type { Provider } from "@/types";
import { fmt } from "@/lib/format";

/**
 * Claims tab content for the ProviderDrawer (SP21 Task 3.1).
 *
 * Reads `provider.recent_claims` — the top-10 claims joined to this
 * provider from the extended `GET /api/config/providers/{npi}` endpoint
 * (Task 1.6). Renders one row per claim (`id` + `patientName` +
 * `billedAmount`) with a "View all claims →" link to the global claims
 * page at the bottom. Falls back to an empty-state line when the
 * provider has no recent claims (e.g. legacy callers that hit the
 * detail endpoint without the recent-claims slice).
 */
export function ProviderRecentClaims({ provider }: { provider: Provider }) {
  const claims = provider.recent_claims ?? [];
  if (claims.length === 0) {
    return (
      <div className="text-muted-foreground text-[13px]">No recent claims.</div>
    );
  }
  return (
    <div className="space-y-2">
      {claims.map((c) => (
        <div
          key={c.id}
          className="flex items-center gap-3 py-2 border-b border-border/30 last:border-0"
        >
          <div className="display mono text-[12.5px] w-32 shrink-0">{c.id}</div>
          <div className="flex-1 min-w-0 text-[12.5px] text-muted-foreground truncate">
            {c.patientName ?? "—"}
          </div>
          <div className="display mono text-[13px]">
            {fmt.usd(c.billedAmount)}
          </div>
        </div>
      ))}
      <a href="/claims" className="text-[12.5px] text-accent hover:underline">
        View all claims →
      </a>
    </div>
  );
}