import React from 'react';
import ImageView from '../../../components/ImageView';
import './index.less';

function ColImageTextCard({ width, height, imgWidth = 200, src, className = '', style, onClick, disabledHover = false, children, isFocus = false, title, imgExt, footerExt }) {
  return (
    <div className={`lm-t-c-col-image-text-card ${className} ${isFocus ? 'lm-t-c-focus-card' : ''} ${disabledHover ? 'disabled-hover' : ''}`} onClick={onClick} style={{ ...style, width, height }}>
      <div className="lm-t-c-col-image-card-header">
        <div className="lm-t-c-col-image-wrapper">
          <ImageView src={src} title={title} style={{ width: imgWidth }} />
          {imgExt && <div className="image-card-part-ext">{imgExt}</div>}
        </div>
        <div className="lm-t-c-col-text-wrapper">{children}</div>
      </div>
      {footerExt && <div className="lm-t-c-col-image-footer">{footerExt}</div>}
    </div>
  );
}

export default React.memo(ColImageTextCard);
