"use client";

import { useEffect } from "react";

export default function ErrorPage({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    console.error("Unhandled error:", error);
  }, [error]);

  return (
    <div className="flex min-h-screen flex-col items-center justify-center px-4">
      <p className="mb-2 text-6xl font-bold text-red-500">500</p>
      <h1 className="mb-2 text-2xl font-bold">Something went wrong</h1>
      <p className="mb-8 max-w-md text-center text-body">
        An unexpected error occurred. Please try again, or contact support if
        the problem persists.
      </p>
      <div className="flex gap-4">
        <button onClick={reset} className="btn-primary">
          Try Again
        </button>
        <a href="/" className="btn-secondary">
          Go Home
        </a>
      </div>
    </div>
  );
}