import { lazy, Suspense } from 'react';
import { BrowserRouter, Switch } from 'react-router-dom';
import { ToastContainer } from 'react-toastify';

import s from './App.module.css';
import PrivateRoute from './components/Routes/PrivateRoute/PrivateRoute';
import PublicRoute from './components/Routes/PublicRoute/PublicRoute';
import Loader from './components/Loader/Loader';



const AuthPage = lazy(
  () =>
    import(
      './components/AuthPage' /* webpackChunkName: "AuthPage" */
    ),
);



function App() {

  return (
    <div className={s.appWrapper}>
      <Suspense fallback={<Loader />}>
        <BrowserRouter>
          <Switch>
            <PrivateRoute exact path="/">
              Home
            </PrivateRoute>
              <PublicRoute exact path={'/z/'} restricted>
                <AuthPage />
              </PublicRoute>
          </Switch>
        </BrowserRouter>
      </Suspense>
      
      <ToastContainer
        position="top-right"
        autoClose={3000}
        hideProgressBar={false}
        newestOnTop={false}
        closeOnClick
        rtl={false}
        pauseOnFocusLoss
        draggable
        pauseOnHover
      />
    </div>
  );
}


export default App;