"use client";

import Link from "next/link";

export default function GlobalError({ error, reset }: { error: Error; reset: () => void }) {
  return (
    <main
      className="min-h-screen flex flex-col items-center justify-center bg-[#0d1721] text-white px-4"
      role="alertdialog"
      aria-live="assertive"
      aria-labelledby="error-title"
      aria-describedby="error-desc"
      tabIndex={-1}
    >
      <h1 id="error-title" className="text-5xl font-extrabold mb-4 text-[#ff914d] focus:outline-none">
        Something went wrong
      </h1>
      <p id="error-desc" className="mb-8 text-lg text-gray-300 max-w-xl text-center">
        Sorry, an unexpected error occurred. Please try again or return to the homepage.
      </p>
      <div className="flex gap-4">
        <button
          onClick={() => reset()}
          className="px-6 py-3 rounded-lg bg-[#ff914d] text-white font-semibold shadow hover:bg-[#ff914d]/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#ff914d] transition-all duration-300"
          aria-label="Try again after error"
        >
          Try Again
        </button>
        <Link
          href="/"
          className="px-6 py-3 rounded-lg bg-gray-700 text-white font-semibold shadow hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 transition-all duration-300"
          aria-label="Go to homepage"
        >
          Go Home
        </Link>
      </div>
    </main>
  );
}
