import { FC } from 'react'
import SideBar from './SideBar'
import AppRouter from '@/router/AppRouter'
import Header from './Header'
import Button from '@/components/Button'
import { Add } from 'iconsax-react'
import { useTranslation } from 'react-i18next'
import { useSharedStore } from './store/sharedStore'

const Main: FC = () => {

    const { t } = useTranslation()
    const { setOpenSidebar, setOpenNewMessage } = useSharedStore()

    return (
        <div className='p-2 md:p-4 overflow-hidden'>
            <SideBar />
            <Header />
            <div className='flex-1 ms-0 xl:ms-[269px] mt-[68px] xl:mt-[81px]'>
                <div className='overflow-auto w-full max-h-[calc(100vh-113px)] md:max-h-[calc(100vh-113px)]'>
                    <div className='pb-20 md:pb-24 xl:pb-20'>
                        <AppRouter />
                    </div>
                </div>
            </div>

            <div className='flex fixed bottom-4 xl:hidden  right-0 justify-center mt-10 md:mt-14 px-4'>
                <Button
                    className='bg-secondary font-normal text-primary w-fit px-4 md:px-6 text-sm'
                    onClick={() => {
                        setOpenSidebar(false)
                        setOpenNewMessage(true)
                    }}
                >
                    <div className='flex gap-2 items-center'>
                        <Add size={18} color='black' />
                        <div>{t('sidebar.new_message')}</div>
                    </div>
                </Button>
            </div>

        </div>
    )
}

export default Main