"use client";

import { useEffect } from "react";

import { Button } from "@/components/Button";
import { Container } from "@/components/Container";
import { PageHeader } from "@/components/PageHeader";

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

  return (
    <>
      <PageHeader
        eyebrow="Something broke"
        title="An unexpected error occurred."
        lede="We logged the issue and our team will take a look. You can try the page again, or head back to the homepage."
      />
      <Container className="pb-24">
        <div className="flex flex-wrap items-center gap-3">
          <Button onClick={() => unstable_retry()}>Try again</Button>
          <Button href="/" variant="secondary">
            Back to OrthoGlobe
          </Button>
        </div>
        {error.digest && (
          <p className="mt-10 text-[12px] text-[var(--color-slate)]">
            Reference: <code className="font-mono">{error.digest}</code>
          </p>
        )}
      </Container>
    </>
  );
}
