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

export interface ListSummaryExtendSettlementProps extends SettlementsHistorySummaryResponse {};

export const ListSummaryExtendSettlement = ({
  settlementAmount,
  transactionAmount,
  pgFeeAmount,
  holdAmount,
  releaseAmount,
  offsetAmount
}: ListSummaryExtendSettlementProps) => {
  
  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">PG 수수료</span>
            <span className="value minus">
              <NumericFormat
                value={ pgFeeAmount } 
                thousandSeparator
                displayType="text"
              ></NumericFormat> <span className="unit">원</span>
            </span>
          </li>
          <li className="summary-amount-item">
            <span className="label">보류</span>
            <span className="value">
              <NumericFormat
                value={ holdAmount } 
                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={ releaseAmount } 
                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={ offsetAmount } 
                thousandSeparator
                displayType="text"
              ></NumericFormat> <span className="unit">원</span>
            </span>
          </li>
        </ul>
      </div>
    </>
  );
};