"use client";

import { useEffect } from "react";

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

  return (
    <main className="site-shell">
      <section className="hero" aria-labelledby="error-heading">
        <div className="container">
          <div className="hero-copy">
            <p className="eyebrow" aria-hidden="true">
              Error
            </p>
            <h1 id="error-heading">Something went wrong</h1>
            <p className="hero-text">
              An unexpected error occurred. Please try again, or contact us at{" "}
              <a href="mailto:contact@novarixnet.com" style={{ color: "var(--accent)" }}>
                contact@novarixnet.com
              </a>{" "}
              if the problem persists.
            </p>
            <div className="hero-actions">
              <button className="button button-primary" onClick={unstable_retry}>
                Try again
              </button>
              <a href="/" className="button button-secondary">
                Go home
              </a>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}