import React from 'react';
import ImageCard from '../ImageCard';
import './index.less';

/**
 * @desc 俩列单图卡片
 * @param {boolean} active 是否选中
 * @param {function} click 回调
 * @param {array} data 卡片转换数据
 * @param {array} sourceData 卡片源数据
 * @param {node} children 卡片信息
 * @param {node} footer 底部拓展
 */
const TwoColumnCard = props => {
  let { active = false, click, children, footer, sourceData, className = '' } = props;
  return (
    <div className={`lm-two-column-card ${className} ${active ? 'active' : ''} ${footer ? 'has-footer' : ''}`} onClick={() => click && click(sourceData)}>
      <div className="lm-two-column-card-header">
        <ImageCard {...props} />
        <div className="lm-two-column-card-info">{children}</div>
      </div>
      {footer}
    </div>
  );
};

export default TwoColumnCard;
