"use client";

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

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

  return (
    <main className="mx-auto flex min-h-full max-w-lg flex-col justify-center px-6 py-24">
      <h1 className="font-[family-name:var(--font-display)] text-3xl">
        Something went wrong
      </h1>
      <p className="mt-3 text-[var(--archi-ink-muted)]">
        This page could not be loaded. Retry the request or return to a safe
        surface.
      </p>
      <div className="mt-8 flex flex-wrap gap-3">
        <button
          type="button"
          onClick={reset}
          className="bg-[var(--archi-ink)] px-4 py-2.5 text-sm text-[var(--archi-bg)]"
        >
          Try again
        </button>
        <Link
          href="/"
          className="border border-[var(--archi-line)] px-4 py-2.5 text-sm"
        >
          Home
        </Link>
        <Link
          href="/dashboard"
          className="border border-[var(--archi-line)] px-4 py-2.5 text-sm"
        >
          Dashboard
        </Link>
      </div>
    </main>
  );
}