import React, { FC } from 'react'
import { Route, Routes, Navigate } from 'react-router-dom'
import { Paths } from './Paths'
import { HomeLayout } from './HomeLayout'
import { Home } from 'pages/activation/home'
import { Login } from 'pages/activation/login'
import { Activate } from 'pages/activation/activate'
import { Dashboard } from 'pages/customerPortal/dashboard'
import { History } from 'pages/customerPortal/history'
import { RequireAuth } from './RequireAuth'

export const AppRoutes: FC = () => {
	return (
		<Routes>
			<Route path="/" element={<HomeLayout />}>
				<Route index element={<Home />} />
				<Route path={Paths.Login} element={<Login />} />
				<Route path={Paths.Activate} element={<Activate />} />
			</Route>
			<Route path={Paths.Account} element={<RequireAuth><HomeLayout alwaysShowIcon /></RequireAuth>}>
				<Route index element={<Navigate replace to={Paths.Dashboard} />} />
				<Route path={Paths.Dashboard} element={<Dashboard />} />
				<Route path={Paths.History} element={<History />} />
			</Route>
		</Routes>
	)
}