import React from 'react';

import PropTypes from 'prop-types';
import CountNumber from './count-number';
import styles from './counter-item.module.scss';

const CounterItem = ({ data, icon }) => (
  <>
    <div className={styles.title || ''}>{data.title}</div>
    <div className={styles.value || ''}>
      {icon && icon}
      <CountNumber end={parseInt(data.value)} />
    </div>
  </>
);

CounterItem.propTypes = {
  data: PropTypes.shape({
    title: PropTypes.string,
    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  }).isRequired,
  icon: PropTypes.oneOfType([PropTypes.element, PropTypes.any]),
};
export default CounterItem;
