import { Link, useRouter } from "@tanstack/react-router";
import type { ErrorComponentProps } from "@tanstack/react-router";
import { Button, buttonClass } from "./ui/Button";

export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
  const router = useRouter();
  const message = error instanceof Error ? error.message : "Unexpected error";
  console.error("Route error:", error);

  return (
    <div className="mx-auto flex max-w-xl flex-col items-start gap-4 px-6 py-20">
      <div className="label-caps text-red-400">Error</div>
      <h1 className="text-2xl font-semibold text-gray-100">{message}</h1>
      <div className="flex gap-2">
        <Button variant="primary" onClick={() => router.invalidate()}>
          Try again
        </Button>
        <Link to="/" className={buttonClass("secondary")}>
          Home
        </Link>
      </div>
    </div>
  );
}