/* eslint-disable react/forbid-prop-types */
import React from 'react';
import PropTypes from 'prop-types';

import styles from './pros-cons.module.scss';
import keygen from '~helpers/keygen';

const ProsCons = ({ module = {}, pros = 'Pros', cons = 'Cons', icons }) => (
  <div className={styles.prosCons || ''}>
    <div className={styles.pros || ''}>
      {icons && <span className={styles.icon || ''}>{icons[0]}</span>}
      <span className={styles.title || ''}>{pros}</span>
      <ul>
        {module.pros.map((perk) => (
          <li key={keygen()}>
            <span className={styles.listIcon || ''}>{icons && icons[2]}</span>
            {perk}
          </li>
        ))}
      </ul>
    </div>
    <div className={styles.cons || ''}>
      {icons && <span className={styles.icon || ''}>{icons[1]}</span>}
      <span className={styles.title || ''}>{cons}</span>
      <ul>
        {module.cons.map((con) => (
          <li key={keygen()}>
            <span className={styles.listIcon || ''}>{icons && icons[3]}</span>
            {con}
          </li>
        ))}
      </ul>
    </div>
  </div>
);

ProsCons.propTypes = {
  module: PropTypes.objectOf(PropTypes.any).isRequired,
  pros: PropTypes.string,
  cons: PropTypes.string,
  icons: PropTypes.arrayOf(PropTypes.any),
  styles: PropTypes.shape({}),
};

export default ProsCons;
