"use client";

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

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

  return (
    <div className="flex min-h-[60vh] flex-col items-center justify-center px-4 text-center">
      <p className="font-display text-[0.55rem] tracking-[0.25em] text-amber uppercase">
        Glitch in the tube
      </p>
      <h1 className="mt-3 font-display text-3xl text-foreground">
        Something went wrong
      </h1>
      <p className="mt-3 max-w-md text-muted">
        The cabinet hit an unexpected error. Try again, or head back to the
        library.
      </p>
      <div className="mt-8 flex flex-wrap justify-center gap-3">
        <button type="button" className="btn-primary" onClick={reset}>
          Try again
        </button>
        <Link href="/" className="btn-ghost">
          Home
        </Link>
      </div>
    </div>
  );
}