"use client";

export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <main className="relative isolate min-h-screen flex items-center justify-center bg-gradient-to-b from-neutral-50 via-white to-neutral-100 dark:from-neutral-950 dark:via-neutral-900 dark:to-neutral-950">
      <section className="container mx-auto max-w-lg px-6 py-16 text-center animate-[fadeInUp_0.6s_ease_forwards]">
        <div className="mx-auto inline-flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-r from-red-500 via-pink-600 to-purple-600 text-white text-3xl shadow-lg">
          ⚠️
        </div>

        <h1 className="mt-6 text-4xl font-bold tracking-tight bg-gradient-to-r from-blue-600 via-purple-600 to-blue-600 bg-clip-text text-transparent">
          Something went wrong
        </h1>

        <p className="mt-4 text-neutral-700 dark:text-neutral-300">
          An unexpected error occurred. Please try again.
        </p>

        {error?.digest && (
          <p className="mt-2 text-xs text-neutral-500 dark:text-neutral-500">
            Error ID: <code>{error.digest}</code>
          </p>
        )}

        <div className="mt-8 flex items-center justify-center">
          <button
            onClick={() => reset()}
            className="inline-flex items-center rounded-lg bg-gradient-to-r from-blue-600 via-purple-600 to-blue-600 text-white px-6 py-2.5 text-sm font-medium hover:opacity-90 transition"
          >
            Retry
          </button>
        </div>
      </section>
    </main>
  );
}