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

export const LinkPaymentTab = ({
    activeTab
}: LinkPaymentTabProps) => {
    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) } 
        >발송내역</button>
        <button 
          className={`subtab-btn ${(activeTab === LinkPaymentTabKeys.PendingSend)? 'active': ''}` }
          onClick={ () => onClickToNavigation(LinkPaymentTabKeys.PendingSend) } 
        >발송대기</button>
      </div>
          </>
        );
}