import React from 'react';
import { css } from '@emotion/core';
import { Flex } from '@rebass/emotion';

import Icon from 'components/icon';
import { space } from 'utils/theme';
import { ICON_NAMES } from 'utils/constants/assets';

const FlexIcon = css`
  margin-right: ${space.xxsmall}px;

  svg {
    display: flex;
  }
`;

export const PaymentLogos =  (): JSX.Element => {
  return (
    <Flex alignItems="center">
      <Icon iconName={ICON_NAMES.VISA} styles={FlexIcon} />
      <Icon iconName={ICON_NAMES.AMERICAN_EXPRESS} styles={FlexIcon} />
      <Icon iconName={ICON_NAMES.MASRERCARD} styles={FlexIcon} />
    </Flex>
  );
};

export default PaymentLogos;