import React from 'react';
import './index.less';
import Module from '../Module';
import IconButton from '../IconButton';
import ProgressText from '../ProgressText';

function List(props) {
  const { style, position, title, list = [], onClick } = props;
  return (
    <Module style={style} className="list">
      {title && <div className="header">
        {position && <span className="title">{position}</span>}
        <span className="sub-title">{title}</span>
      </div>}

      {list.length > 0 && <div className="body">
        {list.map(item => {
          return (
            <div className={`item ${item.style || ''}`}>
              <div className="col part">{item.position}</div>
              <div className="col title">{item.title}</div>
              <div className="col pg">
                <ProgressText progress={item.progress || 0} times={item.times || 0} size="small" />
              </div>
              <div className="col action">
                <IconButton type="view" tip="View" onClick={() => {
                  if (onClick) onClick(item);
                }} />
              </div>
            </div>
          );
        })}
      </div>}
    </Module>
  );
}
List.propTypes = {};
export default List;