import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { 
  FundTransferTabKeys, 
  FundTransferTabProps 
} from '../model/types';
export const FundTransferTab = ({
  activeTab
}: FundTransferTabProps) => {
  const { navigate } = useNavigate();

  const onClickToNavigation = (tab: FundTransferTabKeys) => {
    if(activeTab !== tab){
      if(tab === FundTransferTabKeys.RequestList){
        navigate(PATHS.additionalService.fundTransfer.requestList);
      }
      else if(tab === FundTransferTabKeys.ResultInquiry){
        navigate(PATHS.additionalService.fundTransfer.resultInquiry);
      }
    }
  };

  return (
    <>
      <div className="subTab">
        <button 
          className={`subtab-btn ${(activeTab === FundTransferTabKeys.RequestList)? 'active': ''}` }
          onClick={ () => onClickToNavigation(FundTransferTabKeys.RequestList) } 
        >이체 신청</button>
        <button 
          className={`subtab-btn ${(activeTab === FundTransferTabKeys.ResultInquiry)? 'active': ''}` }
          onClick={ () => onClickToNavigation(FundTransferTabKeys.ResultInquiry) } 
        >결과 조회</button>
      </div>
    </>
  );
};