import { type FC } from 'react'
import SideBar from '../shared/SideBar'
import Header from '../shared/Header'
import { Routes } from 'react-router-dom'
import Footer from '../shared/Footer'
import { clx } from '../helpers/utils'
import { useSharedStore } from '../shared/store/sharedStore'

const MainRouter: FC = () => {

    const { hasSubMenu } = useSharedStore()

    return (
        <div className='p-4 overflow-hidden'>
            <SideBar />
            <Header />
            <div className={clx(
                'flex-1 xl:ms-[269px] mt-[68px] xl:mt-[81px]',
                hasSubMenu && 'xl:ms-[305px]',
            )}>
                <div className={clx(
                    `overflow-auto w-[${window.innerWidth}] max-h-[calc(100vh-113px)]`,
                )}>
                    <div className='pb-20'>
                        <Routes>

                        </Routes>
                    </div>
                </div>
            </div>
            <Footer />
        </div>
    )
}

export default MainRouter