import {
  Devices,
  LocationTick,
  Mobile,
  PasswordCheck,
  Personalcard,
  ProfileCircle,
  Setting as SettingIcon,
  Shield,
  Sms,
} from 'iconsax-react';
import { type TFunction } from 'i18next';

export function getNavConfig(t: TFunction) {
  return [
    {
      text: t('side.account'),
      getIcon: (selected: boolean) =>
        selected ? (
          <ProfileCircle size={24} color="#1976d2" variant="Bold" />
        ) : (
          <ProfileCircle size={24} color="#82B1FF" />
        ),
      path: '/profile',
      children: [
        {
          text: t('side.personalInfo'),
          getIcon: (sel: boolean) =>
            sel ? (
              <Personalcard size={24} color="#1976d2" variant="Bold" />
            ) : (
              <Personalcard size={24} color="#82B1FF" />
            ),
          path: '/profile#info',
        },
        {
          text: t('side.phoneNumber'),
          getIcon: (sel: boolean) =>
            sel ? (
              <Mobile size={24} color="#1976d2" variant="Bold" />
            ) : (
              <Mobile size={24} color="#82B1FF" />
            ),
          path: '/profile#contact-info',
        },
        {
          text: t('side.email'),
          getIcon: (sel: boolean) =>
            sel ? (
              <Sms size={24} color="#1976d2" variant="Bold" />
            ) : (
              <Sms size={24} color="#82B1FF" />
            ),
          path: '/profile#email',
        },
      ],
    },
    {
      text: t('side.security'),
      getIcon: (sel: boolean) =>
        sel ? (
          <Shield size={24} color="#1976d2" variant="Bold" />
        ) : (
          <Shield size={24} color="#82B1FF" />
        ),
      path: '/security',
      children: [
        {
          text: t('side.password'),
          getIcon: (sel: boolean) =>
            sel ? (
              <PasswordCheck size={24} color="#1976d2" variant="Bold" />
            ) : (
              <PasswordCheck size={24} color="#82B1FF" />
            ),
          path: '/security#password',
        },
        {
          text: t('side.verifiedAddress'),
          getIcon: (sel: boolean) =>
            sel ? (
              <LocationTick size={24} color="#1976d2" variant="Bold" />
            ) : (
              <LocationTick size={24} color="#82B1FF" />
            ),
          path: '/security#locations',
        },
        {
          text: t('side.recentLogins'),
          getIcon: (sel: boolean) =>
            sel ? (
              <Devices size={24} color="#1976d2" variant="Bold" />
            ) : (
              <Devices size={24} color="#82B1FF" />
            ),
          path: '/security#sessions',
        },
      ],
    },
    {
      text: t('side.activeDevices'),
      getIcon: (sel: boolean) =>
        sel ? (
          <Devices size={24} color="#1976d2" variant="Bold" />
        ) : (
          <Devices size={24} color="#82B1FF" />
        ),
      path: '/devices',
    },
    {
      text: t('side.settings'),
      getIcon: (sel: boolean) =>
        sel ? (
          <SettingIcon size={24} color="#1976d2" variant="Bold" />
        ) : (
          <SettingIcon size={24} color="#82B1FF" />
        ),
      path: '/setting',
    },
  ];
}