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

import keygen from '~helpers/keygen';
import styles from './selling-points.module.scss';

const SellingPoints = ({ sellingPoints, icon, limit = 3 }) => {
  if (!sellingPoints || sellingPoints.length === 0) {
    return <></>;
  }
  return (
    <ul className={styles.sellingPoint || ''}>
      {sellingPoints.slice(0, limit).map((item) => (
        <li className={`${!icon && (styles.tick || '')}`} key={keygen()}>
          {icon !== null && icon}
          {item}
        </li>
      ))}
    </ul>
  );
};

SellingPoints.propTypes = {
  sellingPoints: PropTypes.arrayOf(PropTypes.string),
  icon: PropTypes.element,
  limit: PropTypes.number,
};

export default SellingPoints;
