import { useTranslation } from 'react-i18next';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import {
  AccountTabKeys,
  AccountTabProps
} from '../model/types';

export const AccountTab = ({
  activeTab
}: AccountTabProps) => {
  const { t } = useTranslation();
  const { navigate } = useNavigate();

  const onClickToNavigation = (tab: AccountTabKeys) => {
    if(activeTab !== tab){
      if(tab === AccountTabKeys.UserManage){
        navigate(PATHS.account.user.manage);
      }
      else if(tab === AccountTabKeys.PasswordManage){
        navigate(PATHS.account.password.manage);
      }
    }
  };
  return(
    <>
      <div className="subTab">
        <button
          className={`subtab-btn ${(activeTab === AccountTabKeys.UserManage)? 'active': ''}` }
          onClick={ () => onClickToNavigation(AccountTabKeys.UserManage) }
        >{t('account.userManagement')}</button>
        <button
          className={`subtab-btn ${(activeTab === AccountTabKeys.PasswordManage)? 'active': ''}` }
          onClick={ () => onClickToNavigation(AccountTabKeys.PasswordManage) }
        >{t('account.passwordManagement')}</button>
      </div>
    </>
  );
};