import { QueryClientProvider } from "@tanstack/react-query";
import { useState } from "react";
import { createBrowserRouter, RouterProvider } from "react-router";
import { makeQueryClient } from "./api/queryClient.ts";
import { AuthGate } from "./auth/AuthGate.tsx";
import { ModuleProviders } from "./modules/ModuleProviders.tsx";
import { routes } from "./routes.tsx";
import "./styles/tokens.css";
import "./styles/base.css";

type Router = ReturnType<typeof createBrowserRouter>;

export function App({ router }: { router?: Router }) {
  const [client] = useState(makeQueryClient);
  const [r] = useState(() => router ?? createBrowserRouter(routes, { basename: "/app" }));
  return (
    <QueryClientProvider client={client}>
      <AuthGate><ModuleProviders><RouterProvider router={r} /></ModuleProviders></AuthGate>
    </QueryClientProvider>
  );
}