import { Home2, DocumentText, NotificationStatus, People, Element3 } from 'iconsax-react'
import { type FC } from 'react'
import { useTranslation } from 'react-i18next'
import { Pages } from '../config/Pages'
import { Link } from 'react-router-dom'

const Footer: FC = () => {

    const { t } = useTranslation('global')

    return (
        <div className='xl:hidden'>
            <div className='h-[60px] '></div>
            <div className='fixed bottom-2 right-3 left-3 bg-white h-[60px] rounded-2xl flex justify-between items-center px-3'>
                <Link to={Pages.dashboard}>
                    <div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
                        <Home2
                            className='size-5'
                            color='#8C90A3'
                        />
                        <div className='text-[10px]'>
                            {t('footer.home')}
                        </div>
                    </div>
                </Link>
                <Link to={Pages.customers.list}>
                    <div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
                        <People
                            className='size-5'
                            color='#8C90A3'
                        />
                        <div className='text-[10px]'>
                            {t('footer.customers')}
                        </div>
                    </div>
                </Link>
                <Link to={Pages.foods.list}>
                    <div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
                        <div className='bg-white p-1 rounded-full -mt-7'>
                            <div className='bg-black flex justify-center items-center size-10 rounded-full'>
                                <Element3
                                    className='size-5'
                                    color='white'
                                />
                            </div>
                        </div>
                        <div className='text-[10px] '>
                            {t('footer.foods')}
                        </div>
                    </div>
                </Link>
                <Link to={Pages.announcements.list}>
                    <div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
                        <NotificationStatus
                            className='size-5'
                            color='#8C90A3'
                        />
                        <div className='text-[10px]'>
                            {t('footer.announcements')}
                        </div>
                    </div>
                </Link>

                <Link to={Pages.orders.list}>
                    <div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
                        <DocumentText
                            className='size-5'
                            color='#8C90A3'
                        />
                        <div className='text-[10px]'>
                            {t('footer.orders')}
                        </div>
                    </div>
                </Link>
            </div>
        </div>
    )
}

export default Footer