import Link from 'next/link';
import { StatusDot } from '@/components/ui/primitives';
import { fmtInt, fmtPct } from '@/lib/format';
import { Time } from '@/lib/time';
import type { Probe } from '@/lib/types';

/** Probe network strip — who is measuring, from where, and whether they are fresh. Server component. */
export function ProbeStrip({ probes }: { probes: Probe[] | null }) {
  if (!probes?.length) return <p className="text-xs text-ink-3">Probe list unavailable.</p>;
  return (
    <ul className="grid grid-cols-2 gap-px overflow-hidden rounded-[4px] border border-line bg-line sm:grid-cols-4 lg:grid-cols-8">
      {probes.map((p) => (
        <li key={p.probe_id} className="bg-panel px-3 py-2.5">
          <div className="flex items-baseline justify-between gap-2">
            <Link href="/probes" className="num truncate text-[12px] text-ink hover:text-accent">
              {p.probe_id}
            </Link>
            <StatusDot status={p.status} />
          </div>
          <div className="mt-0.5 truncate text-[11px] text-ink-2" title={p.name}>
            {p.city} · AS{p.asn}
          </div>
          <div className="num mt-1 flex justify-between text-[10.5px] text-ink-3">
            <span>{fmtInt(p.measurements_1h)}/h</span>
            <span>up {fmtPct(p.uptime_24h, 1)}</span>
          </div>
          <div className="num text-[10.5px] text-ink-3">
            seen <Time ts={p.last_seen} style="time" />
          </div>
        </li>
      ))}
    </ul>
  );
}