import * as React from "react";
import { cn } from "@/lib/utils";

export type ReportKpi = {
  label: string;
  value: React.ReactNode;
  sub?: React.ReactNode;
  tone?: "default" | "positive" | "negative" | "muted";
};

const TONE: Record<string, string> = {
  default: "",
  positive: "text-emerald-600 dark:text-emerald-400",
  negative: "text-rose-600 dark:text-rose-400",
  muted: "text-muted-foreground",
};

/** Dense KPI strip above each report tab. Server component — values arrive formatted. */
export function ReportKpis({ items }: { items: ReportKpi[] }) {
  if (items.length === 0) return null;
  return (
    <div className="mb-3 grid gap-2 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5">
      {items.map((item) => (
        <div key={item.label} className="rounded-2xl border bg-card p-3 shadow-sm">
          <p className="text-[11px] font-medium tracking-wider text-muted-foreground uppercase">
            {item.label}
          </p>
          <p
            className={cn(
              "mt-1 font-mono text-lg font-semibold tracking-tight tabular-nums",
              TONE[item.tone ?? "default"],
            )}
          >
            {item.value}
          </p>
          {item.sub ? (
            <p className="mt-0.5 truncate text-xs text-muted-foreground">{item.sub}</p>
          ) : null}
        </div>
      ))}
    </div>
  );
}

export default ReportKpis;