import { ReactNode } from "react";
import { BrowserRouter } from "react-router-dom";
import { ChakraProvider } from "@chakra-ui/react";
import useInitHooks from "@src/hooks/init-hooks";
import theme from "@src/util/theme";
import { AuthProvider } from "@src/ctx/AuthContext";
import "react-toastify/dist/ReactToastify.css";
import Viewport from "./Viewport";

export default function App() {
  return (
    <ChakraProvider theme={theme}>
      <BrowserRouter>
        <AuthProvider>
          <InitProvider>
            <Viewport />
          </InitProvider>
        </AuthProvider>
      </BrowserRouter>
    </ChakraProvider>
  );
}

function InitProvider(props: { children: ReactNode }) {
  useInitHooks();
  return props.children;
}