import { Buildings, Buildings2, Home2, Messages3, NotificationStatus } from 'iconsax-react'
import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import { Pages } from '../config/Pages'
import { Link, useParams } from 'react-router-dom'

const Footer: FC = () => {

    const { t } = useTranslation('global')
    const { slug } = useParams()

    return (
        <div className='xl:hidden'>
            <div className='h-[60px] '></div>
            <div className='fixed bottom-2 z-10 right-3 left-3 bg-white h-[60px] rounded-2xl flex justify-between items-center px-3'>
                <Link to={`/${slug}/${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={`/${slug}/${Pages.services.other}`}>
                    <div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
                        <Buildings2
                            className='size-5'
                            color='#8C90A3'
                        />
                        <div className='text-[10px]'>
                            {t('footer.companies')}
                        </div>
                    </div>
                </Link>
                <Link to={`/${slug}/${Pages.services.mine}`}>
                    <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'>
                                <Buildings
                                    className='size-5'
                                    color='white'
                                />
                            </div>
                        </div>
                        <div className='text-[10px] '>
                            {t('footer.my_company')}
                        </div>
                    </div>
                </Link>
                <Link to={`/${slug}/${Pages.announcement.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={`/${slug}/${Pages.ticket.list}`}>
                    <div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
                        <Messages3
                            className='size-5'
                            color='#8C90A3'
                        />
                        <div className='text-[10px]'>
                            {t('footer.tickets')}
                        </div>
                    </div>
                </Link>
            </div>
        </div>
    )
}

export default Footer