"use client";

import { useEffect } from "react";
import Link from "next/link";

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

  return (
    <div className="mx-auto flex max-w-lg flex-col items-center gap-5 py-20 text-center">
      <p className="text-xs font-semibold uppercase tracking-[0.18em] text-[var(--accent-3)]">Une erreur est survenue</p>
      <h1 className="font-serif text-4xl text-[var(--foreground)]">Oups, quelque chose s&apos;est mal passe</h1>
      <p className="text-sm text-[var(--muted)]">
        Notre equipe a ete informee. Vous pouvez reessayer ou revenir a l&apos;accueil.
      </p>
      <div className="mt-2 flex flex-wrap items-center justify-center gap-3">
        <button
          type="button"
          onClick={() => reset()}
          className="rounded-xl bg-[var(--accent-3)] px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-[var(--accent-2)]"
        >
          Reessayer
        </button>
        <Link
          href="/"
          className="rounded-xl border border-[var(--line)] px-5 py-2.5 text-sm font-semibold text-[var(--foreground)] transition hover:border-[var(--accent-3)]"
        >
          Retour a l&apos;accueil
        </Link>
      </div>
    </div>
  );
}