"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("[route error]", error);
  }, [error]);
  return (
    <div className="min-h-screen flex items-center justify-center bg-[#0d0d0d] text-[#e0e0e0] p-6">
      <div className="max-w-md text-center">
        <h2 className="font-heading text-2xl mb-3">Something went wrong</h2>
        <p className="text-[#888] text-sm mb-4 font-body">
          We hit an error rendering this page. Try again, or head back to the home page.
        </p>
        {error?.digest && (
          <p className="text-[#444] text-xs font-mono mb-4">ref: {error.digest}</p>
        )}
        <div className="flex gap-3 justify-center">
          <button
            onClick={() => reset()}
            className="px-4 py-2 bg-[#3b82f6] text-white text-sm rounded-sm hover:bg-[#2563eb] transition-colors"
          >
            Try again
          </button>
          <Link
            href="/home-page"
            className="px-4 py-2 border border-[#333] text-sm rounded-sm hover:border-[#3b82f6] transition-colors"
          >
            Home
          </Link>
        </div>
      </div>
    </div>
  );
}