"use client";

import { EpcChip, DeltaPill, InfoDot } from "./primitives";

export interface Kpi {
  label: string;
  value: React.ReactNode;
  unit?: string;
  sub?: React.ReactNode;
  delta?: { text: string; improved: boolean };
  /** Optional "what this includes/excludes" note, shown as an ⓘ by the label. */
  tip?: React.ReactNode;
}

/**
 * The five-across KPI band (Screen A/B). Colour appears only in EPC chips
 * and delta pills — the numbers themselves stay navy.
 */
export function KpiBand({ kpis }: { kpis: Kpi[] }) {
  return (
    <div className="grid grid-cols-2 rounded-lg border border-gray-200 bg-white sm:grid-cols-3 lg:grid-cols-5">
      {kpis.map((k, i) => (
        <div
          key={k.label}
          className={`px-5 py-4 ${i > 0 ? "border-l border-gray-100" : ""}`}
        >
          <div className="flex items-center gap-1 text-[0.68rem] font-bold uppercase tracking-wide text-gray-600">
            {k.label}
            {k.tip && <InfoDot label={k.label} tip={k.tip} />}
          </div>
          <div className="mt-1.5 flex items-baseline gap-1.5 text-[1.6rem] font-semibold leading-none tracking-tight text-brandblue tabular-nums">
            {k.value}
            {k.unit && (
              <span className="text-[0.7rem] font-medium text-gray-600">
                {k.unit}
              </span>
            )}
            {k.delta && (
              <DeltaPill improved={k.delta.improved}>{k.delta.text}</DeltaPill>
            )}
          </div>
          {k.sub && (
            <div className="mt-1.5 text-[0.75rem] tabular-nums text-gray-500">
              {k.sub}
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

export { EpcChip };
