"use client";

import { useEffect } from "react";

// Global error UI for the app router segment.
export default function ErrorPage({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    console.error(error);
  }, [error]);

  return (
    <main className="min-h-dvh flex items-center justify-center px-6">
      <div className="max-w-lg text-center space-y-6">
        <h1 className="text-2xl font-semibold tracking-tight">
          Something went wrong
        </h1>

        <p className="text-muted-foreground">
          An unexpected error occurred while loading this section.
        </p>

        <div className="flex justify-center gap-4 pt-2">
          <button
            type="button"
            onClick={reset}
            className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition"
          >
            Try again
          </button>

          <a
            href="/"
            className="rounded-md border px-4 py-2 text-sm font-medium hover:bg-muted transition"
          >
            Go home
          </a>
        </div>

        {process.env.NODE_ENV === "development" && (
          <pre className="mt-6 rounded-md bg-muted p-4 text-left text-xs overflow-auto">
            {error.message}
          </pre>
        )}
      </div>
    </main>
  );
}