import type { Stats } from "@/lib/api";
import { fmtInt, relTime } from "@/lib/format";
import { Stat } from "./ui";

export function StatsStrip({ stats }: { stats: Stats }) {
  const items: { label: string; value: string; hint?: string }[] = [
    { label: "Sources monitored", value: fmtInt(stats.sources), hint: `${fmtInt(stats.entities)} entities` },
    { label: "Sensors", value: fmtInt(stats.sensors), hint: stats.sensors_degraded ? `${fmtInt(stats.sensors_degraded)} degraded` : "all healthy" },
    { label: "Checks today", value: fmtInt(stats.checks_today), hint: stats.checks_today ? `${Math.round(((stats.not_modified_today ?? 0) / Math.max(1, stats.checks_today ?? 1)) * 100)}% served 304` : undefined },
    { label: "Changes 24h", value: fmtInt(stats.changes_24h), hint: `${fmtInt(stats.snapshots)} snapshots preserved` },
    { label: "Meaningful events 24h", value: fmtInt(stats.events_24h), hint: stats.last_event_at ? `last ${relTime(stats.last_event_at)}` : undefined },
    { label: "Silent changes 24h", value: fmtInt(stats.silent_24h), hint: `${fmtInt(stats.breaking_24h)} breaking` },
  ];
  return (
    <div className="panel mb-4 grid grid-cols-2 divide-x divide-y divide-line sm:grid-cols-3 lg:grid-cols-6 lg:divide-y-0">
      {items.map((s) => (
        <Stat key={s.label} label={s.label} value={s.value} hint={s.hint} />
      ))}
    </div>
  );
}