'use client';
import Link from 'next/link';
import { Container } from '@/components/ui/section';

export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
  return (
    <Container className="py-20 md:py-28">
      <p className="eyebrow">Error</p>
      <h1 className="display mt-2 text-3xl md:text-5xl">Something went wrong.</h1>
      <p className="mt-4 max-w-xl text-ink-2">The page could not be rendered. The dataset itself is fine — this is usually the API being briefly unavailable.</p>
      {error.digest && <p className="mono mt-2 text-xs text-ink-3">ref {error.digest}</p>}
      <div className="mt-6 flex gap-3 text-sm">
        <button type="button" onClick={reset} className="bg-ink px-3 py-2 text-canvas hover:opacity-90">
          Try again
        </button>
        <Link href="/" className="border border-rule px-3 py-2 text-ink-2 hover:text-ink">
          Home
        </Link>
      </div>
    </Container>
  );
}