import React from "react";
import ReactDOM from "react-dom/client";
import "./styles.css";
import { RouterProvider, createRouter } from "@tanstack/react-router";

// Import the generated route tree
import { routeTree } from "./routeTree.gen";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

// Create a client
const queryClient = new QueryClient();
// Create a new router instance
const router = createRouter({
    routeTree,
    //basepath: import.meta.env.BASE_URL, // This is the key part!
});

// Register the router instance for type safety
declare module "@tanstack/react-router" {
    interface Register {
        router: typeof router;
    }
}

ReactDOM.createRoot(document.getElementById("root")!).render(
    <React.StrictMode>
        <QueryClientProvider client={queryClient}>
            <RouterProvider router={router} />
        </QueryClientProvider>
    </React.StrictMode>
);

// // Render the app
// const rootElement = document.getElementById("root")!;
// if (!rootElement.innerHTML) {
//     const root = ReactDOM.createRoot(rootElement);
//     root.render(
//         <StrictMode>
//             <QueryClientProvider client={queryClient}>
//                 <RouterProvider router={router} />
//             </QueryClientProvider>
//         </StrictMode>
//     );
// }