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

export const LinkPaymentTab = ({
    activeTab
}: LinkPaymentTabProps) => {
    const { t } = useTranslation();
    const {navigate} = useNavigate();

      const onClickToNavigation = (tab: LinkPaymentTabKeys) => {
        if(activeTab !== tab){
          if(tab === LinkPaymentTabKeys.ShippingHistory){
            navigate(PATHS.additionalService.linkPayment.shippingHistory);
          }
          else if(tab === LinkPaymentTabKeys.PendingSend){
            navigate(PATHS.additionalService.linkPayment.pendingSend);
          }
        }
      };

        return (
          <>
      <div className="subTab">
        <button
          className={`subtab-btn ${(activeTab === LinkPaymentTabKeys.ShippingHistory)? 'active': ''}` }
          onClick={ () => onClickToNavigation(LinkPaymentTabKeys.ShippingHistory) }
        >{t('additionalService.linkPayment.shippingHistory')}</button>
        <button
          className={`subtab-btn ${(activeTab === LinkPaymentTabKeys.PendingSend)? 'active': ''}` }
          onClick={ () => onClickToNavigation(LinkPaymentTabKeys.PendingSend) }
        >{t('additionalService.linkPayment.pendingSend')}</button>
      </div>
          </>
        );
}