"use client";

import { useEffect } from "react";
import "./globals.css";
import { fontDisplay, fontMono, fontSans } from "./fonts";
import { cn } from "@/lib/utils";

// Root error boundary — replaces the root layout, so it renders its own
// <html>/<body> and re-imports globals.css for styling.
export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    console.error(error);
  }, [error]);

  return (
    <html
      lang="en"
      className={cn(fontSans.variable, fontDisplay.variable, fontMono.variable)}
    >
      <body className="min-h-dvh bg-background text-foreground antialiased">
        <main className="mx-auto flex min-h-dvh max-w-xl flex-col items-center justify-center px-5 text-center">
          <h1 className="font-display text-3xl font-medium tracking-tight">
            Something went wrong
          </h1>
          <p className="mt-3 text-muted-foreground">
            A critical error occurred. Please try again.
          </p>
          <button
            type="button"
            onClick={() => reset()}
            className="mt-8 inline-flex h-11 items-center justify-center rounded-full bg-primary px-6 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
          >
            Try again
          </button>
        </main>
      </body>
    </html>
  );
}
