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

function List(props) {
  const { style, title, subTitle, list = [] } = props;
  return (
    <Module style={style} className="list">
      <div className="header">
        <span className="title">{title}</span>
        <span className="sub-title">{subTitle}</span>
      </div>
      <div className="body">
        {list.map(item => {
          return (
            <div className="item">
              <div className="col part">{item.part}</div>
              <div className="col title">{item.title}</div>
              <div className="col pg">
                <ProgressText progress={item.progress} size="small" />
              </div>
              <div className="col action">
                <IconButton type="view" tip="View" />
              </div>
            </div>
          );
        })}
      </div>
    </Module>
  );
}
List.propTypes = {};
export default List;