"use client";

import { useTranslations } from "next-intl";
import { useEffect } from "react";

import { Button } from "@/components/ui/button";

interface ErrorPageProps {
  error: Error & { digest?: string };
  reset: () => void;
}

export default function ErrorPage({ error, reset }: ErrorPageProps) {
  const t = useTranslations("auto.appError");

  useEffect(() => {
    // Surface to monitoring in production when configured
  }, [error]);

  return (
    <main className="flex min-h-screen flex-col items-center justify-center bg-white px-4 text-center">
      <h1 className="font-heading text-2xl font-bold text-neutral-900 sm:text-3xl">
        {t("title")}
      </h1>
      <p className="mt-3 max-w-md text-sm text-neutral-600 sm:text-base">
        {t("description")}
      </p>
      <Button
        type="button"
        className="mt-8 bg-blue-600 hover:bg-blue-700"
        onClick={() => reset()}
      >
        {t("reloadButton")}
      </Button>
    </main>
  );
}
