import React from 'react';
import PropTypes from 'prop-types';
import parse from 'html-react-parser';

import keygen from '~helpers/keygen';
import styles from './timeline.module.scss';

const Timeline = ({ items = [] }) => (
  <ul className={styles.timeline || ''}>
    {items.map((item) => (
      <li key={keygen()}>
        <div className={`${styles.row || ''} ${item.isActive && styles.active}`}>
          <div className={styles.date || ''}>{item.date}</div>
          <div className={styles.text || ''}>
            <span className={styles.title || ''}>{item.title}</span>
            <p>{parse(item.text)}</p>
          </div>
        </div>
      </li>
    ))}
  </ul>
);

Timeline.propTypes = {
  items: PropTypes.arrayOf(
    PropTypes.shape({
      date: PropTypes.string,
      title: PropTypes.string,
      text: PropTypes.string,
      isActive: PropTypes.bool,
    })
  ).isRequired,
};

export default Timeline;
