import type { ReactNode } from "react";

export interface Kpi {
  n: ReactNode;
  label: string;
  /** Turns pink when above zero. */
  alert?: boolean;
}

/** The old kpis(): number tiles. Zero is grey, an alert above zero is pink. */
export function Kpis({ items, label = "Numbers" }: { items: Kpi[]; label?: string }) {
  return (
    <div className="kpis" role="group" aria-label={label}>
      {items.map((k) => {
        const zero = String(k.n) === "0";
        const cls = ["kpi", k.alert && !zero ? "hot" : "", zero ? "zero" : ""].filter(Boolean).join(" ");
        return (
          <div key={k.label} className={cls} aria-label={`${k.label}: ${String(k.n)}`}>
            <div className="n">{k.n}</div>
            <div className="l">{k.label}</div>
          </div>
        );
      })}
    </div>
  );
}