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

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

export default React.memo(RowImageTextCard);
