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

const Footer: FC = () => {

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

    const isActive = (path: string) => {
        return location.pathname.includes(path)
    }

    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={`w-[70px] flex flex-col items-center gap-1.5 ${isActive(Pages.dashboard) ? 'text-black' : 'text-description'}`}>
                        <Home2
                            className='size-5'
                            color={isActive(Pages.dashboard) ? 'black' : '#8C90A3'}
                            variant={isActive(Pages.dashboard) ? 'Bold' : 'Linear'}
                        />
                        <div className='text-[10px]'>
                            {t('footer.home')}
                        </div>
                    </div>
                </Link>
                <Link to={`/${slug}/${Pages.receipts.index}`}>
                    <div className={`w-[70px] flex flex-col items-center gap-1.5 ${isActive(Pages.receipts.index) ? 'text-black' : 'text-description'}`}>
                        <Receipt21
                            className='size-5'
                            color={isActive(Pages.receipts.index) ? 'black' : '#8C90A3'}
                            variant={isActive(Pages.receipts.index) ? 'Bold' : 'Linear'}
                        />
                        <div className='text-[10px]'>
                            {t('footer.invoice')}
                        </div>
                    </div>
                </Link>
                <Link to={`/${slug}/${Pages.company.my}`}>
                    <div className={`w-[70px] flex flex-col items-center gap-1.5 ${isActive(Pages.company.my) ? 'text-black' : 'text-description'}`}>
                        <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={`w-[70px] flex flex-col items-center gap-1.5 ${isActive(Pages.announcement.list) ? 'text-black' : 'text-description'}`}>
                        <NotificationStatus
                            className='size-5'
                            color={isActive(Pages.announcement.list) ? 'black' : '#8C90A3'}
                            variant={isActive(Pages.announcement.list) ? 'Bold' : 'Linear'}
                        />
                        <div className='text-[10px]'>
                            {t('footer.announcements')}
                        </div>
                    </div>
                </Link>

                <Link to={`/${slug}/${Pages.ticket.list}`}>
                    <div className={`w-[70px] flex flex-col items-center gap-1.5 ${isActive(Pages.ticket.list) ? 'text-black' : 'text-description'}`}>
                        <Messages3
                            className='size-5'
                            color={isActive(Pages.ticket.list) ? 'black' : '#8C90A3'}
                            variant={isActive(Pages.ticket.list) ? 'Bold' : 'Linear'}
                        />
                        <div className='text-[10px]'>
                            {t('footer.tickets')}
                        </div>
                    </div>
                </Link>
            </div>
        </div>
    )
}

export default Footer