import moment from 'moment';
import { VatReturnDetailResponse } from '../../model/types';

export interface IssueSectionProps {
  detail: VatReturnDetailResponse
};

export const IssueSection = ({
  detail
}: IssueSectionProps) => {

  return (
    <>
      <div className="txn-section">
        <div className="section-title">발행 정보</div>
        <ul className="kv-list">
          <li className="kv-row">
            <span className="k">MID</span>
            <span className="v">{ detail.mid }</span>
          </li>
          <li className="kv-row">
            <span className="k">발행대상일자</span>
            <span className="v">{ moment(detail.targetBusinessStartDate).format('YYYY.MM.DD') } ~ { moment(detail.targetBusinessEndDate).format('YYYY.MM.DD') }</span>
          </li>
          <li className="kv-row">
            <span className="k">발행일자</span>
            <span className="v">{ moment(detail.issueDate).format('YYYY.MM.DD') }</span>
          </li>
          <li className="kv-row">
            <span className="k">적요</span>
            <span className="v">{ detail.subject }</span>
          </li>
          <li className="kv-row">
            <span className="k">발행대상</span>
            <span className="v">{ detail.targetType }</span>
          </li>
          <li className="kv-row">
            <span className="k">영수구분</span>
            <span className="v">{ detail.receiptType }</span>
          </li>
          <li className="kv-row">
            <span className="k">Email</span>
            <span className="v">{ detail.email }</span>
          </li>
        </ul>
      </div>
    </>
  );
};