import { lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import NoMatch from '../modules/NoMatch';
import MainLayout from '../layouts/MainLayout';
import RequireAuth from '../components/RequireAuth';
import Login from '../modules/login';
import SignUp from '../modules/signUp';
import CreatePassword from '../modules/createPassword';
import ForgotPassword from '../modules/forgotPassword';
import AdditionalDetails from '../modules/additionalDetails';
import UserManagement from '../modules/userManagement';
import Overview from '../modules/overview';
import Profile from '../modules/overview/profile';
import Error404 from '../modules/Error404';
import Error403 from '../modules/Error403';

const Dashboard = lazy(() => import('../modules/dashboard'));
const Advertisement = lazy(() => import('../modules/advertisement/'));
const Reports = lazy(() => import('../modules/reports'));
const BusinessList = lazy(() => import('../modules/settings/BusinessList'));
const BusinessUserList = lazy(() => import('../modules/settings/BusinessUserList'));
const Payments = lazy(() => import('../modules/settings/Payments'));
const Security = lazy(() => import('../modules/security'));

const basename = process.env.REACT_APP_BASENAME || '';

export default (
<Router basename={basename}>
<Routes>
<Route element={<RequireAuth />}>
<Route path="/" element={<MainLayout />}>
<Route index element={<Dashboard />} />
<Route path="advertisement*" element={<Advertisement />} />
<Route path="business-list" element={<BusinessList />} />
<Route path="business-user-list" element={<BusinessUserList />} />
<Route path="payments" element={<Payments />} />
<Route path="reports/" element={<Reports />} />
<Route path="security/" element={<Security />} />
<Route path="overview/" element={<Overview />} />
<Route path="overview/profile" element={<Profile />} />
<Route path="user-management/" element={<UserManagement />} />
<Route path="" element={<NoMatch />} />
</Route>
</Route>
<Route path="/login" element={<Login />} />
<Route path="/sign-up" element={<SignUp />} />
<Route path="/create-password" element={<CreatePassword />} />
<Route path="/forgot-password" element={<ForgotPassword />} />
<Route path="/additional-details" element={<AdditionalDetails />} />
<Route path="/error404" element={<Error404 />} />
<Route path="/error403" element={<Error403 />} />
</Routes>
</Router>
);

need login successful then open other element otherwise without login then any element url then redirect to login element first