"use client";

import Link from "next/link";
import { useEffect } from "react";
import { Header } from "@/components/header";
import { useT } from "@/components/locale-provider";

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  const t = useT();
  useEffect(() => {
    console.error(error);
  }, [error]);

  return (
    <main id="main-content" className="min-h-screen bg-background text-foreground">
      <Header />
      <div className="mx-auto max-w-[80rem] px-6 py-28 md:py-40">
        <div className="relative">
          <span
            aria-hidden
            className="pointer-events-none absolute -top-8 right-0 select-none font-mono text-[clamp(6rem,22vw,18rem)] font-medium leading-none tracking-[-0.05em] text-foreground/[0.04]"
          >
            500
          </span>
          <p className="font-mono text-[11px] uppercase tracking-[0.18em] text-muted-foreground">
            {t({ en: "Error", sv: "Fel" })}
          </p>
          <h1 className="mt-5 max-w-[14ch] text-[clamp(2.6rem,7vw,5.5rem)] font-medium leading-[0.95] tracking-[-0.035em]">
            {t({ en: "Something went wrong.", sv: "Något gick fel." })}
          </h1>
          <p className="mt-6 max-w-[40ch] font-mono text-sm text-muted-foreground">
            {t({ en: "An unexpected error occurred. Nothing was guessed.", sv: "Ett oväntat fel inträffade. Inget gissades." })}{error.digest ? ` (${error.digest})` : ""}
          </p>
          <div className="mt-12 flex flex-wrap gap-3">
            <button
              onClick={reset}
              className="bg-foreground px-7 py-4 font-mono text-[12px] uppercase tracking-[0.14em] text-background transition-colors hover:bg-[var(--accent-red)]"
            >
              {t({ en: "Try again →", sv: "Försök igen →" })}
            </button>
            <Link
              href="/"
              className="border border-foreground px-7 py-4 font-mono text-[12px] uppercase tracking-[0.14em] transition-colors hover:bg-foreground hover:text-background"
            >
              {t({ en: "Home", sv: "Hem" })}
            </Link>
          </div>
        </div>
      </div>
    </main>
  );
}