import { FC } from 'react'
import SideBar from '../shared/SideBar'
import Header from '../shared/Header'
import { Route, Routes } from 'react-router-dom'
import { Pages } from '../config/Pages'
import Home from '../pages/home/Home'
import MyServices from '../pages/service/MyServices'
import TicketList from '../pages/ticket/TicketList'
import CreateTicket from '../pages/ticket/CreateTicket'
import TicketDetail from '../pages/ticket/Detail'
import TransactionList from '../pages/transaction/List'
import ReceiptsList from '../pages/receipts/List'

const MainRouter: FC = () => {
    return (
        <div className='p-4 overflow-hidden'>
            <SideBar />
            <Header />
            <div className='flex-1 ms-[269px] mt-[81px]'>
                <div className=' overflow-auto h-[calc(100vh-113px)] '>
                    <Routes>
                        <Route path={Pages.dashboard} element={<Home />} />
                        <Route path={Pages.services.mine} element={<MyServices />} />
                        <Route path={Pages.ticket.list} element={<TicketList />} />
                        <Route path={Pages.ticket.create} element={<CreateTicket />} />
                        <Route path={Pages.ticket.detail + ':id'} element={<TicketDetail />} />
                        <Route path={Pages.transactions} element={<TransactionList />} />
                        <Route path={Pages.receipts} element={<ReceiptsList />} />
                    </Routes>
                </div>
            </div>
        </div>
    )
}

export default MainRouter