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

/**
 * Overview tab content for the provider drill-down drawer (SP21
 * Task 2.2). Renders the base provider fields in a two-column grid:
 *
 *   - Identity: NPI, Tax ID, address, phone
 *   - Activity: claim count, outstanding AR
 *
 * Subsequent tasks (Phase 3) will hang ``recent_claims`` and
 * ``recent_activity`` off this surface; for now we only render the
 * base fields the drawer needs to present "who is this provider and
 * what's their activity shape" at a glance.
 */
export function ProviderOverview({ provider }: { provider: Provider }) {
  return (
    <div className="space-y-4">
      <div className="grid grid-cols-2 gap-3">
        <Field label="NPI" value={provider.npi} mono />
        <Field label="Tax ID" value={provider.taxId} mono />
        <Field
          label="Address"
          value={`${provider.address}, ${provider.city}, ${provider.state} ${provider.zip}`}
        />
        <Field label="Phone" value={provider.phone} mono />
      </div>
      <div className="grid grid-cols-2 gap-3 pt-3 border-t border-border/30">
        <Field label="Claims" value={fmt.num(provider.claimCount)} mono />
        <Field label="Outstanding AR" value={fmt.usd(provider.outstandingAr)} mono />
      </div>
    </div>
  );
}

function Field({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
  return (
    <div>
      <div className="eyebrow">{label}</div>
      <div className={`text-[13px] mt-1 ${mono ? "display mono" : ""}`}>{value}</div>
    </div>
  );
}