import "../styles/index.scss";
import type { AppProps } from "next/app";
import { Provider } from "react-redux";
import { store } from "../store/store";
import { Jost } from "next/font/google";
import { AuthProvider, ProtectRoute } from "../contexts/auth";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import { RotatingLines } from "react-loader-spinner";

const font = Jost({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-poppins",
  weight: ["300", "400", "500", "600", "700", "800"],
});

if (typeof window !== "undefined") {
  require("bootstrap/dist/js/bootstrap");
}
export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      {/* <script src="https://unpkg.com/react-scan/dist/auto.global.js"></script> */}
      <Provider store={store}>
        <AuthProvider>
          <ProtectRoute>
            <Component {...pageProps} className={font} />
          </ProtectRoute>
        </AuthProvider>
      </Provider>
      <ToastContainer
        icon={({ type, theme }) => {
          // theme is not used in this example but you could
          switch (type) {
            case "info":
              return (
                <RotatingLines
                  visible={true}
                  // height="96"
                  width="96"
                  // color="grey"
                  strokeWidth="5"
                  animationDuration="0.75"
                  ariaLabel="rotating-lines-loading"
                  // wrapperStyle={{}}
                  // wrapperClass=""
                />
              );
            default:
              return null;
          }
        }}
      />
    </>
  );
}