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 DisbursementsLoanPage from './pages/DisbursementsLoanPage' // DISBURSEMENTS LOANS PAGE
import ApplicationsLoanPage from './pages/ApplicationsLoanPage' // APPLICATIONS LOANS PAGE
import SelectedLoanPage from './pages/SelectedLoanPage' // SELECTED LOANS PAGE
import LoanOffersPage from './pages/LoanOffersPage' // SELECTED LOANS PAGE
import LoansPage from './pages/LoansPage' // SELECTED LOANS PAGE
import RequestPage from './pages/RequestPage' // SELECTED 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.approvedLoansPage} element={<ApprovedLoansPage />} /> {`*/APPROVED LOANS PAGE*/`}
        <Route path={RouteLinks.disbursementsLoanPage} element={<DisbursementsLoanPage />} /> {`*/DISBURSEMENTS LOANS PAGE*/`}
        <Route path={RouteLinks.applicationsLoanPage} element={<ApplicationsLoanPage />} /> {`*/APPLICATIONS LOANS PAGE*/`}
        <Route path={RouteLinks.selectedLoanPage} element={<SelectedLoanPage />} /> {`*/SELECTED LOANS PAGE*/`}
        <Route path={RouteLinks.loanOffersPage} element={<LoanOffersPage />} /> {`*/LOANS OFFERS PAGE*/`}

        <Route path={RouteLinks.loansPage} element={<LoansPage />} /> {`*/LOANS PAGE*/`}
        <Route path={RouteLinks.requestPage} element={<RequestPage />} /> {`*/Request PAGE*/`}
      </Route>

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