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

export interface ListSummaryExtendSettlementProps extends SettlementsHistorySummaryResponse {};

export const ListSummaryExtendSettlement = ({
  settlementAmount,
  transactionAmount,
  pgFeeAmount,
  holdAmount,
  releaseAmount,
  offsetAmount
}: ListSummaryExtendSettlementProps) => {
  const { t } = useTranslation();

  return (
    <>
      <div className="summary-extend">
        <ul className="summary-amount-list">
          <li className="summary-amount-item">
            <span className="label">{t('settlement.transactionAmount')}</span>
            <span className="value">
              <NumericFormat
                value={ transactionAmount }
                thousandSeparator
                displayType="text"
              ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
            </span>
          </li>
          <li className="summary-amount-item">
            <span className="label">{t('settlement.totalPgFee')}</span>
            <span className="value minus">
              <NumericFormat
                value={ pgFeeAmount }
                thousandSeparator
                displayType="text"
              ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
            </span>
          </li>
          <li className="summary-amount-item">
            <span className="label">{t('settlement.hold')}</span>
            <span className="value">
              <NumericFormat
                value={ holdAmount }
                thousandSeparator
                displayType="text"
              ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
            </span>
          </li>
          <li className="summary-amount-item">
            <span className="label">{t('settlement.release')}</span>
            <span className="value link">
              <NumericFormat
                value={ releaseAmount }
                thousandSeparator
                displayType="text"
              ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
            </span>
          </li>
          <li className="summary-amount-item">
            <span className="label">{t('settlement.offset')}</span>
            <span className="value minus">
              <NumericFormat
                value={ offsetAmount }
                thousandSeparator
                displayType="text"
              ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
            </span>
          </li>
        </ul>
      </div>
    </>
  );
};