'use client';

import { fmtInt } from '@/lib/format';
import { useLive } from '@/lib/live';
import type { Ticker } from '@/lib/types';

/** Global Internet Clock (spec §36) — one sentence of real counters. */
export function Clock({ initial }: { initial: Ticker | null }) {
  const live = useLive((s) => s.ticker);
  const t = live ?? initial;
  if (!t) return null;
  const n = (v: number, color?: string) => (
    <span className="num text-ink" style={color ? { color } : undefined}>
      {fmtInt(v)}
    </span>
  );
  return (
    <p className="text-[17px] leading-relaxed text-ink-2 sm:text-[20px]">
      <span className="label mr-3 align-middle">Right now</span>
      {n(t.measurements_per_min)} probe measurements/min · {n(t.bgp_updates_per_min)} BGP updates/min · {n(t.regions_normal)} regions normal · {n(t.regions_elevated, t.regions_elevated ? 'var(--p-elevated)' : undefined)} elevated ·{' '}
      {n(t.regions_severe, t.regions_severe ? 'var(--p-severe)' : undefined)} severe · {n(t.active_incidents, t.active_incidents ? 'var(--p-high)' : undefined)} active {t.active_incidents === 1 ? 'incident' : 'incidents'}
    </p>
  );
}