/* eslint-disable react/no-danger */
/* eslint-disable arrow-body-style */
import React from 'react';
import PropTypes from 'prop-types';

import CounterItem from './counter-item';
import styles from './counter.module.scss';
import keygen from '~helpers/keygen';

const Counter = ({ module }) => (
  <>
    {module.content && (
      <p
        className={styles.counterContent || ''}
        dangerouslySetInnerHTML={{ __html: module.content }}
      />
    )}
    <ul className={styles.counter || ''}>
      {module.items.map((item) => {
        return (
          <li key={keygen()}>
            <CounterItem data={item} />;
          </li>
        );
      })}
    </ul>
  </>
);

Counter.propTypes = {
  module: PropTypes.shape({
    items: PropTypes.arrayOf(PropTypes.object),
    content: PropTypes.string,
  }).isRequired,
};
export default Counter;
