import React from 'react'
import Card from '../index'
import IconFont from '../../../themeComponents/IconFont'
import { Row ,Col} from 'antd';
import './index.less'

/**
 * @desc 单列卡片
 * @param {boolean} active 是否选中
 * @param {function} click 回调
 * @param {array} data 卡片数据
 */
const BaseIconCard = props => {
  const { click,icon, data, title, className='', style } = props;
  return (
    <div
      className={`lm-base-icon-card ${className}`}
      style={style}
      onClick={() => click && click()}
    >
      <div className="lm-base-icon-box">
        <IconFont type={icon} />
      </div>
      <div className="lm-base-icon-card-content">
        {title && (
          <div title={title.info} className="lm-base-icon-card-content-title">
            <IconFont type={title.icon} />
            <span
              className="lm-base-icon-card-content-label"
              title={title.label}
            >
              {title.label}
            </span>
          </div>
        )}
        <Row className="lm-base-icon-card-content-view">
          {data.map((v, k) => {
            return (
              <Col key={k} span="12">
                <Card.CardInfo icon={v.icon} label={v.label} info={v.info} />
              </Col>
            );
          })}
        </Row>
      </div>
    </div>
  );
};

export default BaseIconCard;

