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

import LazyImage from '~hooks/lazy-image';
import keygen from '~helpers/keygen';
import styles from './content-box.module.scss';

const ContentBox = ({ data = [] }) => (
  <div className={styles.contentBoxContainer || ''}>
    <ul className={styles.contentBoxList || ''}>
      {data &&
        data.map((item) => (
          <li key={keygen()}>
            <div className={styles.item || ''}>
              <div className={styles.icon || ''}>
                <LazyImage alt={item.title} src={item.image} />
              </div>
              <div className={styles.body || ''}>
                <div className="h2">{item.title}</div>
                <p>{item.text}</p>
              </div>
            </div>
          </li>
        ))}
    </ul>
  </div>
);

ContentBox.propTypes = {
  data: PropTypes.arrayOf(
    PropTypes.shape({
      title: PropTypes.string,
      image: PropTypes.string,
      text: PropTypes.string,
    })
  ).isRequired,
  styles: PropTypes.shape({}),
};

export default ContentBox;
