import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Icon from '../../visuals/Icon/Icon';

class CheckList extends Component {
  static propTypes = {
    list: PropTypes.arrayOf(PropTypes.string).isRequired,
    icon: PropTypes.any,
    label: PropTypes.string,
    className: PropTypes.string,
    color: PropTypes.oneOf(['ink', 'green']),
  };

  static defaultProps = {
    label: null,
    icon: null,
    className: null,
    color: 'green',
  };

  render() {
    const { label, list, icon, className, color } = this.props;

    const componentClassName = classnames('CheckList', {
      [className]: className,
    });

    const itemClassName = classnames('CheckList-item', {
      [`CheckList-item--${color}`]: !icon && color,
    });

    return (
      <aside className={componentClassName}>
        {label ? <p>{label}</p> : ''}
        <ul className="CheckList-list">
          {list.map(item => (
            <li key={item} className={itemClassName}>
              {icon && <Icon icon={icon} className="CheckList-item--icon" />}
              <div className="CheckList-text">{item}</div>
            </li>
          ))}
        </ul>
      </aside>
    );
  }
}

export default CheckList;