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

const Footer: FC = () => {
    const { t } = useTranslation('global')
    const location = useLocation()

    const isActive = (path: string) => location.pathname === path

    return (
        <div className='xl:hidden'>
            <div className='h-[60px] '></div>
            <div className='fixed z-10 bottom-2 right-3 left-3 bg-white h-[60px] rounded-2xl flex justify-between items-center px-3'>
                <Link to={Pages.services.mine}>
                    <div className={`text-description w-[70px] flex flex-col items-center gap-1.5 ${isActive(Pages.dashboard) ? 'text-black' : ''}`}>
                        <Element4
                            className='size-5'
                            color={isActive(Pages.services.mine) ? 'black' : '#8C90A3'}
                            variant={isActive(Pages.services.mine) ? 'Bold' : 'Linear'}
                        />
                        <div className={`text-[10px] ${isActive(Pages.services.mine) ? 'text-black' : ''}`}>
                            {t('footer.my_services')}
                        </div>
                    </div>
                </Link>
                <Link to={Pages.services.other}>
                    <div className={`text-description w-[70px] flex flex-col items-center gap-1.5 ${isActive(Pages.services.other) ? 'text-black' : ''}`}>
                        <Element3
                            className='size-5'
                            color={isActive(Pages.services.other) ? 'black' : '#8C90A3'}
                            variant={isActive(Pages.services.other) ? 'Bold' : 'Linear'}
                        />
                        <div className={`text-[10px] ${isActive(Pages.services.other) ? 'text-black' : ''}`}>
                            {t('footer.other_services')}
                        </div>
                    </div>
                </Link>
                <Link to={Pages.dashboard}>
                    <div className={`text-description w-[70px] flex flex-col items-center gap-1.5 ${isActive(Pages.services.mine) ? 'text-black' : ''}`}>
                        <div className='bg-white p-1 rounded-full -mt-7'>
                            <div className={`bg-black flex justify-center items-center size-10 rounded-full ${isActive(Pages.services.mine) ? 'bg-black' : ''}`}>
                                <Home2
                                    className='size-5'
                                    color={isActive(Pages.dashboard) ? 'white' : 'white'}
                                    variant={isActive(Pages.dashboard) ? 'Bold' : 'Linear'}
                                />
                            </div>
                        </div>
                        <div className={`text-[10px] ${isActive(Pages.services.mine) ? 'text-black' : ''}`}>
                            {t('footer.home')}
                        </div>
                    </div>
                </Link>
                <Link to={Pages.announcement.list}>
                    <div className={`text-description w-[70px] flex flex-col items-center gap-1.5 ${isActive(Pages.announcement.list) ? 'text-black' : ''}`}>
                        <NotificationStatus
                            className='size-5'
                            color={isActive(Pages.announcement.list) ? 'black' : '#8C90A3'}
                            variant={isActive(Pages.announcement.list) ? 'Bold' : 'Linear'}
                        />
                        <div className={`text-[10px] ${isActive(Pages.announcement.list) ? 'text-black' : ''}`}>
                            {t('footer.announcements')}
                        </div>
                    </div>
                </Link>
                <Link to={Pages.ticket.list}>
                    <div className={`text-description w-[70px] flex flex-col items-center gap-1.5 ${isActive(Pages.ticket.list) ? 'text-black' : ''}`}>
                        <Messages3
                            className='size-5'
                            color={isActive(Pages.ticket.list) ? 'black' : '#8C90A3'}
                            variant={isActive(Pages.ticket.list) ? 'Bold' : 'Linear'}
                        />
                        <div className={`text-[10px] ${isActive(Pages.ticket.list) ? 'text-black' : ''}`}>
                            {t('footer.tickets')}
                        </div>
                    </div>
                </Link>
            </div>
        </div>
    )
}

export default Footer
