import { getRateInAllFormats } from '@transferwise/formatting';
import PropTypes from 'prop-types';
import React from 'react';
import { useIntl } from 'react-intl';
import { i as isConsideredMidmarketRate } from './isConsideredMidmarketRate-4f12041d.js';
import { s as styleInject } from './style-inject.es-1f59c1d0.js';

var css_248z = ".cc_goodExchangeRate_4099316779 {\n  display: flex;\n  order: 1;\n  margin-left: var(--size-4);\n}\n.cc_goodExchangeRate_4099316779::before {\n  content: '';\n  width: var(--size-8);\n  height: var(--size-8);\n  margin-top: -2px;\n  border-radius: 100%;\n  background: var(--color-sentiment-positive);\n}\n.cc_badExchangeRate_4099316779 {\n  display: flex;\n  order: 1;\n  margin-left: var(--size-4);\n}\n.cc_badExchangeRate_4099316779::before {\n  content: '';\n  width: var(--size-8);\n  height: var(--size-8);\n  margin-top: -2px;\n  border-radius: 100%;\n  background: var(--color-sentiment-negative);\n}\n.cc_rateAndIndicator_4099316779 {\n  display: flex !important;\n  align-items: center;\n}\n@media (min-width: 768px) {\n  .cc_rateAndIndicator-md_4099316779 {\n    display: flex !important;\n  }\n}\n.cc_rate_4099316779 {\n  font-weight: var(--font-weight-semi-bold);\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9jb21tb24vRXhjaGFuZ2VSYXRlSW5kaWNhdG9yLm1vZHVsZS5sZXNzIiwic3JjL3Jlc291cmNlcy9zdGF0aWMvbGVzcy9kb3QubW9kdWxlLmxlc3MiLCJFeGNoYW5nZVJhdGVJbmRpY2F0b3IubW9kdWxlLmxlc3MiLCJzcmMvcmVzb3VyY2VzL3N0YXRpYy9sZXNzL3V0aWxpdGllcy5tb2R1bGUubGVzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJQTtFQ0NFLGFBQUE7RUFDQSxRQUFBO0VBQ0EsMEJBQUE7QUNIRjtBREtFO0VBQ0UsV0FBQTtFQUNBLG9CQUFBO0VBQ0EscUJBQUE7RUFDQSxnQkFBQTtFQUNBLG1CQUFBO0VBQ0EsMkNBQUE7QUNISjtBRkpBO0VDSEUsYUFBQTtFQUNBLFFBQUE7RUFDQSwwQkFBQTtBQ1VGO0FEUkU7RUFDRSxXQUFBO0VBQ0Esb0JBQUE7RUFDQSxxQkFBQTtFQUNBLGdCQUFBO0VBQ0EsbUJBQUE7RUFDQSwyQ0FBQTtBQ1VKO0FGYkE7RUdSRSx3QkFBQTtFQTREQSxtQkFBQTtBRG5DRjtBQ3RCSTtFQUFBO0lBQ0Usd0JBQUE7RUR5Qko7QUFDRjtBRmpCQTtFQUNFLHlDQUFBO0FFbUJGIiwiZmlsZSI6IkV4Y2hhbmdlUmF0ZUluZGljYXRvci5tb2R1bGUubGVzcyJ9 */";
var componentStyles = {"goodExchangeRate":"cc_goodExchangeRate_4099316779","badExchangeRate":"cc_badExchangeRate_4099316779","rateAndIndicator":"cc_rateAndIndicator_4099316779","rateAndIndicator-md":"cc_rateAndIndicator-md_4099316779","rateAndIndicatorMd":"cc_rateAndIndicator-md_4099316779","rate":"cc_rate_4099316779"};
styleInject(css_248z);

const ExchangeRateIndicator = ({
  styles,
  referenceRate,
  rate,
  label,
  sourceCurrency,
  targetCurrency
}) => {
  const derivedStyles = {
    ...componentStyles,
    ...styles
  };
  const {
    locale,
    formatMessage
  } = useIntl();
  const rateInAllFormats = getRateInAllFormats(rate, sourceCurrency, targetCurrency, {}, locale);
  return (
    /*#__PURE__*/
    // eslint-disable-next-line react/jsx-filename-extension
    React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
      className: derivedStyles.rateAndIndicator,
      "data-testid": "exchange-rate-indicator"
    }, referenceRate && (isConsideredMidmarketRate(rate, referenceRate) ? /*#__PURE__*/React.createElement("span", {
      className: derivedStyles.goodExchangeRate,
      "aria-label": formatMessage({
        id: 'good-exchange-rate'
      })
    }) : /*#__PURE__*/React.createElement("span", {
      className: derivedStyles.badExchangeRate,
      "aria-label": formatMessage({
        id: 'bad-exchange-rate'
      })
    })), /*#__PURE__*/React.createElement("span", {
      className: derivedStyles.rate
    }, rateInAllFormats ? rateInAllFormats.formats?.equation.calculationInDecimal : null)), label)
  );
};
ExchangeRateIndicator.propTypes = {
  styles: PropTypes.shape({
    rateAndIndicator: PropTypes.string,
    goodExchangeRate: PropTypes.string,
    badExchangeRate: PropTypes.string
  }),
  sourceCurrency: PropTypes.string.isRequired,
  targetCurrency: PropTypes.string.isRequired,
  rate: PropTypes.number.isRequired,
  referenceRate: PropTypes.number,
  label: PropTypes.element
};
ExchangeRateIndicator.defaultProps = {
  styles: {},
  referenceRate: undefined,
  label: undefined
};

export { ExchangeRateIndicator as E };
//# sourceMappingURL=ExchangeRateIndicator-24a5e2f4.js.map
