import moment from 'moment';
import { InfoWrapKeys, DetailInfoProps } from '../../model/types';

export const BillingInfoWrap = ({
  billingInfo,
}: DetailInfoProps) => {

  const getInstallmentMonth = () => {
    let rs = [];
    if((!!billingInfo?.installmentMonth && parseInt(billingInfo?.installmentMonth) > 1)){
      rs.push(
        <li 
          key={ `key-installmentMonth`}
          className="kv-row"
        >
          <span className="k">할부개월</span>
          <span className="v">{ billingInfo?.installmentMonth }개월 할부</span>
        </li> 
      );
    }
    else{
      rs.push(
        <li 
          key={ `key-installmentMonth`}
          className="kv-row"
        >
          <span className="k">할부개월</span>
          <span className="v">일시불</span>
        </li> 
      );
    }
    return rs;
  };
  return (
    <>
      <div className="txn-section">
        <div className="section-title">중요 정보</div>
        <ul className="kv-list">
          <li className="kv-row">
            <span className="k">빌키</span>
            <span className="v">{ billingInfo?.billKey }</span>
          </li>
          <li className="kv-row">
            <span className="k">TID</span>
            <span className="v">{ billingInfo?.tid }</span>
          </li>
          <li className="kv-row">
            <span className="k">주분번호</span>
            <span className="v">{ billingInfo?.orderNumber }</span>
          </li>
          <li className="kv-row">
            <span className="k">승인번호</span>
            <span className="v">{ billingInfo?.approvalNumber }</span>
          </li>
          <li className="kv-row">
            <span className="k">승인일자</span>
            <span className="v">{ moment(billingInfo?.approvalDate).format('YYYY.MM.DD') }</span>
          </li>
          <li className="kv-row">
            <span className="k">요청상태</span>
            <span className="v">{ billingInfo?.requestStatus }</span>
          </li>
          <li className="kv-row">
            <span className="k">처리결과</span>
            <span className="v">{ billingInfo?.processResult }</span>
          </li>
          { getInstallmentMonth() }
          <li className="kv-row">
            <span className="k">상품명</span>
            <span className="v">{ billingInfo?.productName }</span>
          </li>
          <li className="kv-row">
            <span className="k">구매자</span>
            <span className="v">{ billingInfo?.buyerName }</span>
          </li>
        </ul>
      </div>
    </>
  )
};