import * as React from "react";

import { Router } from "./router";
import { CustomTheme, languageStore } from "@shared";
import { ThemeProvider } from "@mui/material/styles";
import { ToastContainer } from "react-toastify";
import { GlobalErrorBoundary } from "./GlobalErrorBoundary";
import { TestingModeBanner } from "@widgets";
import { observer } from "mobx-react-lite";

export const App: React.FC = observer(() => {
  React.useEffect(() => {
    document.documentElement.lang = languageStore.language;
  }, [languageStore.language]);

  return (
    <GlobalErrorBoundary>
      <ThemeProvider theme={CustomTheme.Light}>
        <TestingModeBanner />
        <ToastContainer />
        <Router />
      </ThemeProvider>
    </GlobalErrorBoundary>
  );
});