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

export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
  useEffect(() => {
    // Error shells render from scratch and can lose the prepaint theme attribute.
    if (!document.documentElement.getAttribute('data-theme')) {
      const dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
      document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
    }
  }, []);
  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 intact — 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-2 text-sm">
        <button type="button" onClick={reset} className="btn btn-primary">
          Try again
        </button>
        <Link href="/" className="btn">
          Home
        </Link>
        <Link href="/system" className="btn">
          System status
        </Link>
      </div>
    </Container>
  );
}