import { DetailArrow } from '../detail-arrow';
import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
import moment from 'moment';

export const IssueInfoWrap = ({
  transactionCategory,
  issueInfo,
  purpose,
}: DetailInfoProps) => {
 
  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">{ issueInfo?.approvalNumber }</span>
          </li>
          <li className="kv-row">
            <span className="k">발행번호</span>
            <span className="v">{ issueInfo?.issueNumber }</span>
          </li>
          <li className="kv-row">
            <span className="k">발행일시</span>
            <span className="v">{ moment(issueInfo?.issueDateTime).format('YYYY.MM.DD HH:mm:ss') }</span>
          </li>
          <li className="kv-row">
            <span className="k">용도</span>
            <span className="v">{ purpose }</span>
          </li>
          <li className="kv-row">
            <span className="k">결제수단</span>
            <span className="v">{ issueInfo?.paymentMethod }</span>
          </li>
          <li className="kv-row">
            <span className="k">상품명</span>
            <span className="v">{ issueInfo?.productName }</span>
          </li>
          <li className="kv-row">
            <span className="k">진행상태</span>
            <span className="v">{ issueInfo?.transmissionStatus }</span>
          </li>
          <li className="kv-row">
            <span className="k">거래구분</span>
            <span className="v">{ issueInfo?.transactionType }</span>
          </li>
        </ul>
      </div>
    </>
  )
};