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

export const SettlementAgencyTab = ({
  activeTab  
}: SettlementAgencyTabProps) => {
  const { navigate } = useNavigate();
  
  const onClickToNavigation = (tab: SettlementAgencyTabKeys) => {
    if(activeTab !== tab){
      if(tab === SettlementAgencyTabKeys.Manage){
        navigate(PATHS.additionalService.settlementAgency.manage);
      }
      else if(tab === SettlementAgencyTabKeys.Deposit){
        navigate(PATHS.additionalService.settlementAgency.deposit);
      }
      else if(tab === SettlementAgencyTabKeys.Member){
        navigate(PATHS.additionalService.settlementAgency.member);
      }
    }
  };
  return (
    <>
      <div className="subTab three">
        <button 
          className={`subtab-btn ${(activeTab === SettlementAgencyTabKeys.Manage)? 'active': ''}` }
          onClick={ () => onClickToNavigation(SettlementAgencyTabKeys.Manage) } 
        >정산대행 관리</button>
        <button 
          className={`subtab-btn ${(activeTab === SettlementAgencyTabKeys.Deposit)? 'active': ''}` }
          onClick={ () => onClickToNavigation(SettlementAgencyTabKeys.Deposit) } 
        >예치금 내역</button>
        <button 
          className={`subtab-btn ${(activeTab === SettlementAgencyTabKeys.Member)? 'active': ''}` }
          onClick={ () => onClickToNavigation(SettlementAgencyTabKeys.Member) } 
        >정산매장</button>
      </div>
    </>
  );
};