import { 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 CustomerPage from './pages/CustomerPage' // REPAYMENTS PAGE
import SubscriptionsPage from './pages/SubscriptionsPage' // TRANSACTIONS PAGE
import BillingsPage from './pages/BillingsPage' // LOAN CHARGES PAGE
import UsersAdminPage from "./pages/UsersAdminPage"; // ADMIN USERS PAGE
import RecentSignupPage from "./pages/RecentSignupPage"; // RECENT SIGNUP PAGE
import ProductsPage from './pages/ProductsPage' // PRODUCTS PAGE
import ErrorPage from './pages/ErrorPage';

import LoansPage from './pages/LoansPage' // SELECTED LOANS PAGE
import TransactionDetailsPage from './pages/TransactionDetailsPage' // TRANSACTION DETAILS 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.recentSignup} element={<RecentSignupPage />} /> {`*/RECENT SIGNUP PAGE*/`}
        <Route path={RouteLinks.subscriptions} element={<SubscriptionsPage />} /> {`*/SUBSCRIPTIONS PAGE*/`}
        <Route path={RouteLinks.customerPage} element={<CustomerPage />} /> {`*/CUSTOMER PAGE*/`}
        <Route path={RouteLinks.billings} element={<BillingsPage />} /> {`*/BILLINGS PAGE*/`}
        <Route path={RouteLinks.products} element={<ProductsPage />} /> {`*/PRODUCTS PAGE*/`}
        <Route path={RouteLinks.usersAdmin} element={<UsersAdminPage />} /> {`*/ADMIN USERS PAGE*/`}
        
        <Route path={RouteLinks.loansPage} element={<LoansPage />} /> {`*/LOANS PAGE*/`}
        <Route path={RouteLinks.transaction_details_page} element={<TransactionDetailsPage />} /> {`*/TRANSACTION PAGE*/`}
      </Route>

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