import { NumericFormat } from 'react-number-format';
import { SettlementsTransactionSummaryResponse } from '../model/types';

export interface ListSummaryExtendTransactionProps extends SettlementsTransactionSummaryResponse {};

export const ListSummaryExtendTransaction = ({
  settlementAmount,
  transactionAmount,
  paymentFeeAmount,
  escrowFeeAmount,
  authFeeAmount,
  vatAmount,
  preSettlementCancelOffset
}: ListSummaryExtendTransactionProps) => {
  
  return (
    <>
      <div className="summary-extend">
        <ul className="summary-amount-list">
          <li className="summary-amount-item">
            <span className="label">거래금액</span>
            <span className="value">
              <NumericFormat
                value={ transactionAmount } 
                thousandSeparator
                displayType="text"
              ></NumericFormat> <span className="unit">원</span>
            </span>
          </li>
          <li className="summary-amount-item">
            <span className="label">결제 수수료</span>
            <span className="value minus">
              <NumericFormat
                value={ paymentFeeAmount } 
                thousandSeparator
                displayType="text"
              ></NumericFormat> <span className="unit">원</span>
            </span>
          </li>
          <li className="summary-amount-item">
            <span className="label">에스크로 수수료</span>
            <span className="value">
              <NumericFormat
                value={ escrowFeeAmount } 
                thousandSeparator
                displayType="text"
              ></NumericFormat> <span className="unit">원</span>
            </span>
          </li>
          <li className="summary-amount-item">
            <span className="label">인증 수수료</span>
            <span className="value link">
              <NumericFormat
                value={ authFeeAmount } 
                thousandSeparator
                displayType="text"
              ></NumericFormat> <span className="unit">원</span>
            </span>
          </li>
          <li className="summary-amount-item">
            <span className="label">VAT</span>
            <span className="value minus">
              <NumericFormat
                value={ vatAmount } 
                thousandSeparator
                displayType="text"
              ></NumericFormat> <span className="unit">원</span>
            </span>
          </li>
          <li className="summary-amount-item">
            <span className="label">정산전 취소상계</span>
            <span className="value minus">
              <NumericFormat
                value={ preSettlementCancelOffset } 
                thousandSeparator
                displayType="text"
              ></NumericFormat> <span className="unit">원</span>
            </span>
          </li>
        </ul>
      </div>
    </>
  );
};