import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { BillingListProps } from '../model/types';
import { ListDateGroup } from './list-date-group';

export const BillingList = ({ 
  transactionCategory,
  listItems 
}: BillingListProps) => {
  const { navigate } = useNavigate();
  
  const getListDateGroup = () => {
    let rs = [];
    for (const [key, value] of Object.entries(listItems)) {
      rs.push(
        <ListDateGroup
          transactionCategory={ transactionCategory }
          key={ key }
          date={ key }
          items={ value }
        ></ListDateGroup>
      );  
    }
    return rs;
  };

  const onClickToNavigate = () => {
    navigate(PATHS.transaction.billing.charge);
  };
  
  return (
    <>
      <div className="transaction-list">
        { getListDateGroup() }
        <div className="apply-row bottom-padding">
          <button 
            className="btn-50 btn-blue flex-1"
            onClick={ () => onClickToNavigate() }          
          >결제 신청</button>
        </div>
      </div>  
    </>
  );
};