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

export function NotFound({ children }: { children?: ReactNode }) {
  return (
    <div className="mx-auto flex max-w-xl flex-col items-start gap-4 px-6 py-20">
      <div className="label-caps text-accent-400">404</div>
      <h1 className="text-2xl font-semibold text-gray-100">
        {children ?? "This page doesn't exist, or you don't have access to it."}
      </h1>
      <Link to="/" className={buttonClass("secondary")}>
        Back to dashboard
      </Link>
    </div>
  );
}