"use client";

import { useEffect } from "react";
import { Container, SectionHeading, Button, LinkButton } from "@/components/ui";
import { useI18n } from "@/i18n/i18n-provider";

/**
 * Next.js' Datei-Konvention fuer Laufzeitfehler beim Rendern einer Seite —
 * ohne diese Datei zeigt Next.js in Produktion eine generische, unbrandete
 * Fehlerseite. MUSS eine Client Component sein (Next.js-Vorgabe fuer
 * error.tsx); rendert innerhalb desselben Layout-Baums wie die restliche
 * Seite, useI18n() ist daher verfuegbar (I18nProvider sitzt im Root-Layout
 * oberhalb, siehe app/layout.tsx).
 */
export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
  const { t } = useI18n();

  useEffect(() => {
    // Serverseitig geloggt Next.js Rendering-Fehler bereits automatisch;
    // dieses Log dient nur der Sichtbarkeit im Browser fuer den Fall eines
    // client-seitig ausgeloesten Fehlers.
    console.error(error);
  }, [error]);

  return (
    <div className="py-24">
      <Container className="max-w-xl text-center">
        {/* Eine Wabe mit Riss: etwas ist kaputtgegangen, aber reparierbar. */}
        <svg viewBox="0 0 24 26" aria-hidden="true" className="mx-auto mb-10 h-20 w-20">
          <polygon
            points="12,1 22.4,7 22.4,19 12,25 1.6,19 1.6,7"
            fill="color-mix(in oklab, var(--color-honey) 25%, transparent)"
            stroke="var(--color-honey-dark)"
            strokeWidth="1"
          />
          <path
            d="M12 3.5l-1.6 5 2.6 2.2-2.4 4.4 2.2 3.1-1.3 4.3"
            fill="none"
            stroke="var(--color-honey-dark)"
            strokeWidth="1"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
        <SectionHeading
          eyebrow={t.siteErrorPage.eyebrow}
          title={t.siteErrorPage.title}
          align="center"
          className="mx-auto"
        />
        <p className="mt-6 text-ink/70">{t.siteErrorPage.text}</p>
        <div className="mt-10 flex flex-wrap items-center justify-center gap-4">
          <Button onClick={reset}>{t.siteErrorPage.retry}</Button>
          <LinkButton href="/" variant="secondary">
            {t.siteErrorPage.backToHome}
          </LinkButton>
        </div>
      </Container>
    </div>
  );
}