// @flow
import React from 'react';
import styled from 'styled-components';
import { FormattedNumber } from 'react-intl';
import type { CurrencyProps } from './currency-formatter.proptypes';

const StyledWrapper = styled.span`
  display: inline-block;
  &::first-letter {
    margin-right: 0.1em;
  }
`;

export const CurrencyFormatter = ({
  showPlusSign = false,
  'data-qa': dataQa,
  'data-cy': dataCy,
  id,
  ...props
}: CurrencyProps) => {
  const { value, currency } = props;

  return (
    <StyledWrapper data-cy={dataCy} data-qa={dataQa} id={id}>
      {showPlusSign && value > 0 ? '+' : null}
      <FormattedNumber
        value={value}
        minimumFractionDigits={2}
        currencyDisplay="symbol"
        currency={currency}
        style="currency" // eslint-disable-line
        {...props}
      />
    </StyledWrapper>
  );
};

CurrencyFormatter.displayName = 'CurrencyFormatter';
