import { Headphone } from 'iconsax-react'
import { type FC } from 'react'
import { useTranslation } from 'react-i18next'
import { useLocation } from 'react-router-dom'
import { Pages } from '../../config/Pages'
import SubMenuItem from './SubMenuItem'

const SupportSubMenu: FC = () => {

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


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


    return <div className='py-12'>
        <div className='flex gap-3 items-center border-b border-border pb-10 px-6'>
            <Headphone
                size={24}
                color='#000'
                variant='Bold'
            />
            <div className='text-xs'>
                {t('sidebar.support')}
            </div>
        </div>

        <div className='flex flex-col mt-10 gap-4'>
            <SubMenuItem
                title={t('submenu.plan_list')}
                isActive={isActive('list')}
                link={Pages.support.list}
            />
            <SubMenuItem
                title={t('submenu.create_plan')}
                isActive={isActive('create')}
                link={Pages.support.create}
            />
        </div>

    </div>
}

export default SupportSubMenu