import { RouterProvider } from "@octanejs/tanstack-router";
import type { RenderRouteProps } from "@octanejs/vite-plugin";
import { getClientRouter } from "./router.client.ts";
import { ROUTER_STATE_KEY, type AppRouter } from "./router.ts";
import { CustomerQueryProvider } from "./runtime/customer-query-provider";

// On the server the RenderRoute middleware (router.server.ts) has already built
// and loaded a per-request router and placed it in request state. In the
// browser there is no state, so the singleton loaded by pre-hydrate.ts is used.
export function App(props: RenderRouteProps) {
  const router =
    (props.state?.get(ROUTER_STATE_KEY) as AppRouter | undefined) ??
    getClientRouter();
  return (
    <CustomerQueryProvider>
      <RouterProvider router={router} />
    </CustomerQueryProvider>
  );
}