import "@/styles/globals.css";
import { ChakraProvider } from "@chakra-ui/react";
import { QueryParamProvider } from "use-query-params";
import { NextAdapter } from "next-query-params";
import { theme } from "@/components/theme";
import { useKeycloak } from "@/contexts/KeycloakContext";
import { SWRConfig } from "swr";
import { fetcher } from "@/lib/api";
import { Fonts } from "@/components/base/global";

const Adapter = (props) => <NextAdapter {...props} shallow={true} />;

export default function App({ Component, pageProps }) {
  // const { initialized, authenticated } = useKeycloak();

  // if (!initialized) return <Spinner />;
  // if (!authenticated) return <div>Redirecting to login...</div>;

  return (
    <ChakraProvider theme={theme}>
      <SWRConfig value={{ fetcher }}>
        <QueryParamProvider
          adapter={Adapter}
          options={{ enableBatching: true }}
        >
          <Fonts />
          <Component {...pageProps} />
        </QueryParamProvider>
      </SWRConfig>
    </ChakraProvider>
  );
}