import { formatMoney } from '@transferwise/formatting';
import PropTypes from 'prop-types';
import React from 'react';
import { useIntl, FormattedMessage } from 'react-intl';
import { P as ProviderLogo } from './ProviderLogo-d98111d0.js';
import { s as styleInject } from './style-inject.es-1f59c1d0.js';

var css_248z = ".cc_comparison-versus_3296223122 {\n  max-width: 568px;\n  border-radius: 3px;\n  background-color: var(--color-forest-green);\n  color: var(--color-white);\n  font-family: var(--font-family-regular);\n}\n.cc_comparison-versus__header_3296223122 {\n  padding: 24px 32px;\n  text-align: center;\n}\n.cc_table-versus_3296223122 {\n  width: 100%;\n  max-width: 568px;\n  table-layout: fixed;\n  border-collapse: collapse;\n  border-radius: 3px;\n  background: inherit;\n}\n.cc_table-versus__cell_3296223122 {\n  height: 72px;\n  padding: 0 32px 0 0;\n  text-align: right;\n}\n.cc_table-versus__cell_3296223122 .cc_send-amount_3296223122 {\n  margin-bottom: 0;\n  font-size: var(--font-size-14);\n  font-weight: var(--font-weight-semi-bold);\n}\n.cc_table-versus__cell_3296223122:nth-of-type(1) {\n  padding-left: 32px;\n}\n.cc_featured-row_3296223122 {\n  background-color: var(--color-forest-green);\n}\n.cc_featured-row_3296223122 .cc_table-versus__cell_3296223122 {\n  position: relative;\n}\n.cc_featured-row_3296223122 .cc_table-versus__cell_3296223122 .cc_send-amount_3296223122 {\n  margin-bottom: 0;\n  font-size: var(--font-size-14);\n  font-weight: var(--font-weight-semi-bold);\n}\n.cc_featured-row_3296223122 .cc_table-versus__cell_3296223122:first-child::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: -16px;\n  width: 20px;\n  height: 72px;\n  border-radius: 3px;\n  background-color: var(--color-forest-green);\n  box-shadow: none;\n}\n.cc_featured-row_3296223122 .cc_table-versus__cell_3296223122:last-child::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  right: -16px;\n  width: 20px;\n  height: 72px;\n  border-radius: 3px;\n  background-color: var(--color-forest-green);\n  box-shadow: none;\n}\n.cc_supporting-text_3296223122 {\n  display: block;\n  margin-top: var(--size-8);\n  color: var(--color-white);\n  font-size: var(--font-size-12);\n  font-weight: normal;\n}\n.cc_table-versus__provider_logo_3296223122 {\n  min-width: calc(var(--size-8) * 10);\n  max-width: 16px;\n  max-height: 24px;\n  margin: var(--size-4) 0;\n  object-fit: contain;\n  object-position: 0 0;\n}\n@media (min-width: 768px) {\n  .cc_table-versus__provider_logo_3296223122 {\n    width: 8em;\n  }\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9jb21wYXJpc29uLXRhYmxlLXZlcnN1cy9jb21wb25lbnRzL0NvbXBhcmlzb25UYWJsZVZlcnN1cy5tb2R1bGUubGVzcyIsIkNvbXBhcmlzb25UYWJsZVZlcnN1cy5tb2R1bGUubGVzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNQTtFQUNFLGdCQUFBO0VBQ0Esa0JBQUE7RUFDQSwyQ0FBQTtFQUNBLHlCQUFBO0VBQ0EsdUNBQUE7QUNMRjtBRFFBO0VBQ0Usa0JBQUE7RUFDQSxrQkFBQTtBQ05GO0FEU0E7RUFDRSxXQUFBO0VBQ0EsZ0JBQUE7RUFDQSxtQkFBQTtFQUNBLHlCQUFBO0VBQ0Esa0JBQUE7RUFDQSxtQkFBQTtBQ1BGO0FEVUE7RUFDRSxZQUFBO0VBQ0EsbUJBQUE7RUFDQSxpQkFBQTtBQ1JGO0FES0E7RUFNSSxnQkFBQTtFQUNBLDhCQUFBO0VBQ0EseUNBQUE7QUNSSjtBRFdFO0VBQ0Usa0JBQUE7QUNUSjtBRGFBO0VBQ0UsMkNBQUE7QUNYRjtBRGNBO0VBQ0Usa0JBQUE7QUNaRjtBRFdBO0VBSUksZ0JBQUE7RUFDQSw4QkFBQTtFQUNBLHlDQUFBO0FDWko7QURnQkk7RUFDRSxXQUFBO0VBQ0Esa0JBQUE7RUFDQSxNQUFBO0VBQ0EsV0FBQTtFQUNBLFdBQUE7RUFDQSxZQUFBO0VBQ0Esa0JBQUE7RUFDQSwyQ0FBQTtFQUNBLGdCQUFBO0FDZE47QURtQkk7RUFDRSxXQUFBO0VBQ0Esa0JBQUE7RUFDQSxNQUFBO0VBQ0EsWUFBQTtFQUNBLFdBQUE7RUFDQSxZQUFBO0VBQ0Esa0JBQUE7RUFDQSwyQ0FBQTtFQUNBLGdCQUFBO0FDakJOO0FEc0JBO0VBQ0UsY0FBQTtFQUNBLHlCQUFBO0VBQ0EseUJBQUE7RUFDQSw4QkFBQTtFQUNBLG1CQUFBO0FDcEJGO0FEdUJBO0VBQ0UsbUNBQUE7RUFDQSxlQUFBO0VBQ0EsZ0JBQUE7RUFDQSx1QkFBQTtFQUNBLG1CQUFBO0VBQ0Esb0JBQUE7QUNyQkY7QUR1QkU7RUFBQTtJQUNFLFVBQUE7RUNwQkY7QUFDRiIsImZpbGUiOiJDb21wYXJpc29uVGFibGVWZXJzdXMubW9kdWxlLmxlc3MifQ== */";
var componentStyles = {"comparison-versus":"cc_comparison-versus_3296223122","comparisonVersus":"cc_comparison-versus_3296223122","comparison-versus__header":"cc_comparison-versus__header_3296223122","comparisonVersus__header":"cc_comparison-versus__header_3296223122","table-versus":"cc_table-versus_3296223122","tableVersus":"cc_table-versus_3296223122","table-versus__cell":"cc_table-versus__cell_3296223122","tableVersus__cell":"cc_table-versus__cell_3296223122","send-amount":"cc_send-amount_3296223122","sendAmount":"cc_send-amount_3296223122","featured-row":"cc_featured-row_3296223122","featuredRow":"cc_featured-row_3296223122","supporting-text":"cc_supporting-text_3296223122","supportingText":"cc_supporting-text_3296223122","table-versus__provider_logo":"cc_table-versus__provider_logo_3296223122","tableVersus__provider_logo":"cc_table-versus__provider_logo_3296223122"};
styleInject(css_248z);

const ComparisonTableVersus = ({
  styles,
  sourceCurrency,
  chosenProviderAlias,
  quotes,
  headerComponent
}) => {
  const derivedStyles = {
    ...componentStyles,
    ...styles
  };
  const sortedQuotes = quotes.sort((a, b) => a.sendAmount - b.sendAmount);
  const {
    locale
  } = useIntl();
  return /*#__PURE__*/React.createElement("div", {
    className: derivedStyles['comparison-versus']
  }, headerComponent && /*#__PURE__*/React.createElement("div", {
    className: derivedStyles['comparison-versus__header']
  }, headerComponent), /*#__PURE__*/React.createElement("table", {
    className: derivedStyles['table-versus']
  }, /*#__PURE__*/React.createElement("tbody", null, sortedQuotes.map(quote => /*#__PURE__*/React.createElement("tr", {
    className: derivedStyles[quote.alias === chosenProviderAlias ? 'featured-row' : ''],
    key: quote.alias
  }, /*#__PURE__*/React.createElement("td", {
    className: derivedStyles['table-versus__cell']
  }, /*#__PURE__*/React.createElement(ProviderLogo, {
    styles: {
      providerLogo: derivedStyles['table-versus__provider_logo']
    },
    logo: quote.logo,
    altText: quote.logoAltText ? quote.logoAltText : quote.name,
    name: quote.name,
    alias: quote.alias
  })), /*#__PURE__*/React.createElement("td", {
    className: derivedStyles['table-versus__cell']
  }, /*#__PURE__*/React.createElement("span", {
    className: derivedStyles['send-amount']
  }, formatMoney(quote.sendAmount, sourceCurrency, locale, {
    alwaysShowDecimals: true
  })), /*#__PURE__*/React.createElement("span", {
    className: derivedStyles['supporting-text']
  }, quote.alias === chosenProviderAlias ? /*#__PURE__*/React.createElement(FormattedMessage, {
    id: "you-sent"
  }) : /*#__PURE__*/React.createElement(FormattedMessage, {
    id: "possible-cost"
  }))))))));
};
ComparisonTableVersus.propTypes = {
  // TODO Not sure if this should be derived from 'quote'
  sourceCurrency: PropTypes.string.isRequired,
  // This could be derived from cheapest etc, but actually the copy is in context of this provider too
  chosenProviderAlias: PropTypes.string.isRequired,
  quotes: PropTypes.arrayOf(PropTypes.shape({
    alias: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired,
    logo: PropTypes.string.isRequired,
    logoAltText: PropTypes.string.isRequired,
    sendAmount: PropTypes.number.isRequired
  })).isRequired,
  styles: PropTypes.shape({
    'table-versus': PropTypes.string,
    'table-versus__cell': PropTypes.string,
    'featured-row': PropTypes.string,
    'supporting-text': PropTypes.string
  }),
  headerComponent: PropTypes.element
};
ComparisonTableVersus.defaultProps = {
  styles: {},
  headerComponent: null
};

export { ComparisonTableVersus as C };
//# sourceMappingURL=ComparisonTableVersus-42de5787.js.map
