import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "react-loading-skeleton/dist/skeleton.css";
import { Provider } from "react-redux";
import { RouterProvider } from "react-router-dom";
import { PersistGate } from "redux-persist/integration/react";
import { Toaster } from "sonner";
import App from "./App";
import "./index.css";
import { persistor, store } from "./redux/store";
import router from "./route/Router";

const queryClient = new QueryClient();
createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <PersistGate loading={null} persistor={persistor}>
      <QueryClientProvider client={queryClient}>
        <Toaster position="bottom-right" />
        <Provider store={store}>
          <RouterProvider router={router} />
          <App />
        </Provider>
      </QueryClientProvider>
    </PersistGate>
  </StrictMode>
);