import { lazy, Suspense } from 'react'
import { Routes, Route } from 'react-router-dom'
import RouteLinks from './RouteLinks'

import UserExist from './authorization/UserExist'
import PageLoader from './components/PageLoader'

import LoginPage from './pages/LoginPage' // LOGIN PAGE
import HomePage from './pages/HomePage' // Home PAGE
import UsersPage from './pages/UsersPage' // Users PAGE
import ApprovedLoansPage from './pages/ApprovedLoansPage' // APPROVED LOANS PAGE
import ApplyPage from './pages/ApplyPage' // APPLY LOANS PAGE


// const Home = lazy(() => import('./pages/Home'));

export default function SiteRoutes() {
  return (
    <Routes>
      <Route path={RouteLinks.loginPage} element={<LoginPage />} /> {`*/LOGIN PAGE*/`}

      <Route element={<UserExist />}>
        <Route path={RouteLinks.homePage} element={<HomePage />} /> {`*/HOME PAGE*/`}
        <Route path={RouteLinks.usersPage} element={<UsersPage />} /> {`*/USERS PAGE*/`}
        <Route path={RouteLinks.approvedLoans} element={<ApprovedLoansPage />} /> {`*/APPROVED LOANS PAGE*/`}
        <Route path={RouteLinks.apply} element={<ApplyPage />} /> {`*/APPLY LOANS PAGE*/`}
      </Route>

      {/* ERROR PAGE */}
      <Route 
        path={RouteLinks.errorPage} // error page
        element={
          <Suspense fallback={<PageLoader />}>
            <p>Error Page 1</p>
          </Suspense>
        } 
      />
    </Routes>
  )
}
