"use client";

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

/* Article-crash fallback for the dynamic resource route. */
export default function ArticleError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    console.error("[article-error]", error.digest ?? error.message);
  }, [error]);

  return (
    <section className="py-24 text-center max-md:py-16">
      <div className="mx-container mx-auto max-w-xl">
        <p className="font-mono text-[11px] font-medium tracking-[0.18em] text-brand">
          ARTICLE UNAVAILABLE
        </p>
        <h1 className="mt-2.5 font-display text-[clamp(26px,3vw,36px)] font-bold text-ink">
          This article couldn&apos;t load.
        </h1>
        <p className="mx-auto mt-3 max-w-[460px] text-[15px] leading-relaxed text-muted">
          Something went wrong while opening this guide. Try again or browse
          the full library.
        </p>
        <div className="mt-7 flex flex-wrap justify-center gap-3">
          <button
            type="button"
            onClick={() => reset()}
            className="inline-flex min-h-[48px] items-center rounded-lg bg-brand px-6 text-[15px] font-semibold text-white hover:bg-brand-dark"
          >
            Try again
          </button>
          <Link
            href="/resources#guides"
            className="inline-flex min-h-[48px] items-center rounded-lg border border-line bg-white px-6 text-[15px] font-semibold text-ink hover:border-brand hover:text-brand"
          >
            All resources
          </Link>
        </div>
      </div>
    </section>
  );
}