"use client";

import { useEffect } from "react";
import { Button } from "@/components/ui/Button";

export default function ErrorPage({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    // Journal côté client sans détail sensible ; le digest permet la corrélation serveur.
    console.error("Erreur de rendu", error.digest ?? "");
  }, [error]);
  return (
    <section className="section-y bg-ivory-100">
      <div className="container-site py-16 text-center">
        <h1 className="text-h2">Une erreur est survenue</h1>
        <p className="text-lead text-ink-700 mx-auto mt-4 max-w-[32rem]">
          Veuillez réessayer. Si le problème persiste, contactez-nous.
        </p>
        <div className="mt-8 flex justify-center gap-3">
          <Button onClick={reset} arrow={false}>
            Réessayer
          </Button>
          <Button href="/" variant="outline">
            Accueil
          </Button>
        </div>
      </div>
    </section>
  );
}