import type { ReactServerClientContext } from "@lazarv/react-server/client";
import {
  createRootRouteWithContext,
  Link,
  Outlet,
} from "@tanstack/react-router";
import { TanStackRouterDevtools } from "@tanstack/router-devtools";

export const Route = createRootRouteWithContext<{
  outlets: Record<string, React.ReactNode>;
  client: ReactServerClientContext;
}>()({
  pendingMinMs: 0,
  component: () => (
    <>
      <nav className="bg-gray-800 p-4">
        <div className="container mx-auto flex justify-between items-center">
          <div className="text-white font-bold text-xl">My App</div>
          <div className="flex space-x-4">
            <Link
              to="/"
              className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium [&.active]:bg-gray-900 [&.active]:text-white"
            >
              Home
            </Link>
            <Link
              to="/posts"
              className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium [&.active]:bg-gray-900 [&.active]:text-white"
            >
              Posts
            </Link>
            <Link
              to="/about"
              className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium [&.active]:bg-gray-900 [&.active]:text-white"
            >
              About
            </Link>
          </div>
        </div>
      </nav>
      <hr />
      <div className="p-2">
        <Outlet />
      </div>
      <TanStackRouterDevtools />
    </>
  ),
});