import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { 
  FundAccountTabKeys, 
  FundAccountTabProps 
} from '../../model/fund-account/types';
export const FundAccountTab = ({
  activeTab
}: FundAccountTabProps) => {
  const { navigate } = useNavigate();

  const onClickToNavigation = (tab: FundAccountTabKeys) => {
    if(activeTab !== tab){
      if(tab === FundAccountTabKeys.TransferList){
        navigate(PATHS.additionalService.fundAccount.transferList);
      }
      else if(tab === FundAccountTabKeys.ResultList){
        navigate(PATHS.additionalService.fundAccount.resultList);
      }
    }
  };

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