'use client';

import Link from 'next/link';

/** Rendering/API failure. Framed as OUR failure (spec §57) — never as an Internet event. */
export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
  return (
    <div className="mx-auto flex min-h-[60vh] max-w-[720px] flex-col items-start justify-center gap-4 px-5 py-16">
      <p className="label text-warn">Instrument error</p>
      <h1 className="text-2xl font-medium tracking-tight">The observatory could not render this page.</h1>
      <p className="text-ink-2">This is a failure of our own pipeline or API, not a measurement of the Internet. {error.digest && <span className="num text-ink-3">ref {error.digest}</span>}</p>
      <div className="flex gap-4 text-sm">
        <button type="button" onClick={reset} className="rounded-[4px] border border-line px-3 py-1.5 text-ink hover:border-line-2">
          Retry
        </button>
        <Link href="/" className="py-1.5 text-accent hover:underline">
          Back to the gauge
        </Link>
      </div>
    </div>
  );
}