'use client';
import Link from 'next/link';
import { useEffect } from 'react';
import { routes } from '@/lib/site';

/** Route-level error boundary: never shows stack traces; offers retry and degrades to search/detail pages. */
export default function ErrorPage({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
  useEffect(() => {
    console.error('route error', error.digest ?? error.message);
  }, [error]);
  return (
    <div className="container-x mx-auto flex max-w-[1600px] flex-col items-start justify-center py-24 md:py-40">
      <p className="eyebrow text-warn">Telemetry interrupted</p>
      <h1 className="display mt-3 text-4xl md:text-6xl">Something went wrong.</h1>
      <p className="mt-4 max-w-md text-ink-2">The data service did not respond in time. Cached pages and search keep working; this view can be retried.</p>
      <div className="mt-8 flex gap-3">
        <button type="button" onClick={reset} className="rounded-md bg-accent px-4 py-2.5 text-sm font-medium text-accent-ink">Retry</button>
        <Link href={routes.home()} className="rounded-md border border-rule-strong px-4 py-2.5 text-sm text-ink hover:bg-plane-2">Home</Link>
      </div>
      {error.digest && <p className="mono mt-6 text-xs text-ink-3">ref {error.digest}</p>}
    </div>
  );
}