import { Profile } from 'iconsax-react'
import { type FC } from 'react'
import { useTranslation } from 'react-i18next'
import SubMenuItem from './SubMenuItem'
import { Pages } from '../../config/Pages'

const UsersSubMenu: FC = () => {

    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'>
                <Profile
                    size={24}
                    color='#000'
                    variant='Bold'
                />
                <div className='text-xs'>
                    {t('sidebar.users')}
                </div>
            </div>

            <div className='flex flex-col mt-10 gap-4'>
                <SubMenuItem
                    title={t('submenu.user_list')}
                    isActive={isActive('list')}
                    link={Pages.users.list}
                />
                <SubMenuItem
                    title={t('submenu.add_user')}
                    isActive={isActive('create')}
                    link={Pages.users.create}
                />
                <SubMenuItem
                    title={t('submenu.role_list')}
                    isActive={isActive('all')}
                    link={Pages.users.roleList}
                />
                <SubMenuItem
                    title={t('submenu.role_create')}
                    isActive={isActive('roles-add')}
                    link={Pages.users.roleCreate}
                />
                <SubMenuItem
                    title={t('user.add_user_group')}
                    isActive={isActive('group-add')}
                    link={Pages.users.groupAdd}
                />
                <SubMenuItem
                    title={t('user.list_user_group')}
                    isActive={isActive('groups')}
                    link={Pages.users.groupList}
                />
            </div>
        </div>
    )
}

export default UsersSubMenu