'use client';

import Link from 'next/link';
import { AlertIcon, HomeIcon } from '@/components/Icons';

export default function Error({ reset }: { error: Error & { digest?: string }; reset: () => void }) {
  return (
    <div className="mx-auto flex max-w-xl flex-col items-center px-4 py-24 text-center sm:px-6">
      <span className="grid h-16 w-16 place-items-center rounded-2xl bg-danger-soft text-danger">
        <AlertIcon className="h-8 w-8" />
      </span>
      <h1 className="mt-6 font-serif text-3xl font-semibold">This page could not load</h1>
      <p className="mt-3 leading-relaxed text-ink-2">The directory service did not respond. Try again in a moment.</p>
      <div className="mt-8 flex flex-wrap justify-center gap-3">
        <button onClick={reset} className="btn btn-primary">
          Try again
        </button>
        <Link href="/" className="btn btn-quiet">
          <HomeIcon className="h-4 w-4" /> Go to the homepage
        </Link>
      </div>
    </div>
  );
}