"use client";

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

/**
 * Route-level boundary for the marketing surface. Catches throws from the
 * catalog/news/prices server fetches — `products/[slug]/sellers` rethrows any
 * non-404 — so an upstream API hiccup degrades to this panel instead of the
 * framework's default error page.
 */
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    // Replace with your monitoring client (Sentry et al.) when one is wired up.
    console.error(error);
  }, [error]);

  return (
    <div className="flex min-h-[60dvh] items-center justify-center bg-gray-50 px-4">
      <div className="text-center">
        <h1 className="mb-3 text-2xl font-black text-gray-900">Something went wrong</h1>
        <p className="mx-auto mb-8 max-w-sm text-gray-500">
          We couldn&apos;t load this page. This is usually temporary — please try again.
        </p>
        {error.digest && (
          <p className="mb-6 font-mono text-xs text-gray-400">Reference: {error.digest}</p>
        )}
        <div className="flex flex-wrap justify-center gap-4">
          <button
            onClick={reset}
            className="inline-flex items-center gap-2 rounded-xl bg-[#CC1414] px-6 py-3 text-sm font-bold text-white transition-colors hover:bg-[#A50E0E]"
          >
            <RotateCw size={15} /> Try Again
          </button>
          <Link
            href="/"
            className="rounded-xl border-2 border-gray-200 px-6 py-3 text-sm font-bold text-gray-700 transition-colors hover:border-[#CC1414] hover:text-[#CC1414]"
          >
            Go to Homepage
          </Link>
        </div>
      </div>
    </div>
  );
}