import { ChakraProvider } from "@chakra-ui/react";
import { createAsyncStoragePersister } from "@tanstack/query-async-storage-persister";
import { QueryClient } from "@tanstack/react-query";
import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
import { system } from "./theme";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 60, // 1 Stunde gültig
      gcTime: 1000 * 60 * 60 * 24 * 7, // 7 Tage im Storage behalten
    },
  },
});

const persister = createAsyncStoragePersister({
  storage: window.localStorage,
});

ReactDOM.createRoot(document.getElementById("root")!).render(
  <PersistQueryClientProvider
    client={queryClient}
    persistOptions={{ persister }}
  >
    <ChakraProvider value={system}>
      <App />
    </ChakraProvider>
  </PersistQueryClientProvider>
);