interface Metric {
  label: string;
  value: string | number;
  sub?: string;
  accent?: string;
  hint?: string;
}

const DOT_COLORS: Record<string, string> = {
  blue: "bg-blue-500",
  indigo: "bg-indigo-500",
  green: "bg-emerald-500",
  emerald: "bg-emerald-500",
  amber: "bg-amber-500",
  red: "bg-red-500",
  purple: "bg-violet-500",
  cyan: "bg-cyan-500",
};

export function MetricStrip({ metrics }: { metrics: Metric[] }) {
  return (
    <div className="bg-white rounded-lg border border-slate-200 flex divide-x divide-slate-100">
      {metrics.map((m) => (
        <div
          key={m.label}
          className="flex-1 px-4 py-3 min-w-0"
          title={m.hint}
        >
          <p className="text-[20px] font-bold text-slate-900 leading-none tracking-tight truncate tabular-nums">
            {m.value}
          </p>
          <p className="text-[10px] font-medium text-slate-400 uppercase tracking-wide mt-1.5 flex items-center gap-1.5">
            <span className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${DOT_COLORS[m.accent ?? "blue"] ?? DOT_COLORS.blue}`} />
            <span className="truncate">{m.label}</span>
          </p>
          {m.sub && (
            <p className="text-[10px] text-slate-400 mt-0.5 truncate">{m.sub}</p>
          )}
        </div>
      ))}
    </div>
  );
}
