'use client';

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

/**
 * Error page — rendered when a page render throws. Kept deliberately separate
 * from the 404 page: an API failure (a rejected Origin, a network error, a
 * 5xx) is NOT "product not found", and dressing it up as a 404 sends the
 * merchant hunting for a slug bug that isn't there. The full error is in the
 * server log; this page only needs to say "temporary" and offer a retry.
 */
export default function ErrorPage({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    // The server log has the full error; the digest printed here links the two.
    console.error(error);
  }, [error]);

  return (
    <div className="mx-auto flex max-w-2xl flex-col items-center justify-center px-4 py-24 text-center">
      <p className="text-sm font-medium text-muted-foreground">
        <%- language === 'he' ? 'שגיאה' : 'Error' %>
      </p>
      <h1 className="mt-2 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
        <%- language === 'he' ? 'משהו השתבש' : 'Something went wrong' %>
      </h1>
      <p className="mt-4 text-muted-foreground">
        <%- language === 'he' ? 'זו תקלה זמנית בטעינת העמוד — לא עמוד חסר. נסו שוב בעוד רגע.' : 'This is a temporary problem loading the page — not a missing page. Please try again in a moment.' %>
      </p>
      <div className="mt-8 flex gap-4">
        <button
          type="button"
          onClick={reset}
          className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90"
        >
          <%- language === 'he' ? 'לנסות שוב' : 'Try again' %>
        </button>
        <Link
          href="/"
          className="rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground hover:bg-muted"
        >
          <%- language === 'he' ? 'לדף הבית' : 'Go home' %>
        </Link>
      </div>
    </div>
  );
}