'use client';

import { useDegraded } from '@/lib/live';
import { Time } from '@/lib/time';

/** Spec §57 — our own failure must never be read as an Internet event. Shown whenever internal_status ≠ ok or stale. */
export function DegradedBanner() {
  const { degraded, status, reason, frozenSince } = useDegraded();
  if (!degraded) return null;
  return (
    <div role="status" className="border-b border-warn/40 bg-[rgba(233,196,106,0.08)] px-4 py-2 text-[12.5px] text-ink">
      <div className="mx-auto flex max-w-[1440px] flex-wrap items-center gap-x-3 gap-y-1">
        <span className="inline-flex items-center gap-2 font-medium uppercase tracking-[0.12em] text-warn">
          <span className="size-1.5 rounded-full bg-warn" aria-hidden="true" />
          Instrument degraded
        </span>
        <span className="text-ink-2">
          {status === 'stale' ? 'The pressure engine has not run recently.' : 'Too few fresh probes, stale BGP feed or unhealthy stores.'} The score is frozen
          {frozenSince && (
            <>
              {' '}
              since <Time ts={frozenSince} style="short" className="num text-ink" />
            </>
          )}{' '}
          and must not be read as an Internet event.
          {reason && <span className="text-ink-3"> — {reason}</span>}
        </span>
      </div>
    </div>
  );
}