import React from 'react';
import PropTypes from 'prop-types';

import Box from '../Box';
import { Image } from '../Image';

import { Text } from '../Typography';
import { withTheme } from '../styles';

const FeatureIconComponent = (props) => {
  const { title, subtitle, icon, settings } = props;

  const iconElement =
    typeof icon === 'string' ? (
      <Image src={icon} alt={title} height="20px" />
    ) : (
      <Box fontSize="20px">{icon}</Box>
    );

  return (
    <Box lineHeight="1" {...settings}>
      {iconElement}
      <Text textOverflow fontWeight="bold">
        {title}
      </Text>
      <Text textOverflow>{subtitle}</Text>
    </Box>
  );
};

FeatureIconComponent.propTypes = {
  title: PropTypes.string,
  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
  subtitle: PropTypes.string,
  settings: PropTypes.objectOf(Object),
};

FeatureIconComponent.defaultProps = {
  settings: {},
  title: '',
  subtitle: '',
};

FeatureIconComponent.displayName = 'FeatureIcon';

export default withTheme(FeatureIconComponent);