import { QueryClient, QueryClientProvider, useQuery } from "react-query";
import "../styles/globals.css";
import type { AppProps } from "next/app";
import { AuthProvider } from "../src/context/Auth";

import { useRouter } from "next/router";

import ProtectedRoute from "../src/routes/protected-route";
import { Toaster } from "sonner";

const queryClient = new QueryClient();

function MyApp({ Component, pageProps }: AppProps) {
  const noAuthRequired = ["/login", "/404"];
  const router = useRouter();

  return (
    <>
      <QueryClientProvider client={queryClient}>
        <AuthProvider>
          {noAuthRequired.includes(router.pathname) ? (
            <Component {...pageProps} />
          ) : (
            <ProtectedRoute>
              <Component {...pageProps} />
            </ProtectedRoute>
          )}
          <Toaster richColors position="top-right" />
          {/* <ToastContainer
            hideProgressBar
            closeButton={false}
            position="top-right"
            toastStyle={{
              boxShadow: "none",
            }}
          /> */}
        </AuthProvider>
      </QueryClientProvider>
    </>
  );
}

export default MyApp;