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

function ComparisonImageCard({ width, height, src1, src2, className = '', style, disabledHover = false, onClick, isFocus = false, title1, children, title2, imgExt1, imgExt2 }) {
  return (
    <div className={`lm-t-c-comparison-image-card ${className} ${isFocus ? 'lm-t-c-focus-card' : ''} ${disabledHover ? 'disabled-hover' : ''}`} onClick={onClick} style={{ ...style, width, height }}>
      <div className="lm-t-c-comparison-image-wrapper">
        <div className="lm-t-c-comparison-image-item">
          <ImageView src={src1} title={title1} />
          {imgExt1 && <div className="image-card-part-ext">{imgExt1}</div>}
        </div>
        <div className="lm-t-c-comparison-image-item">
          <ImageView src={src2} title={title2} />
          {imgExt2 && <div className="image-card-part-ext">{imgExt2}</div>}
        </div>
      </div>
      <div className="lm-t-c-content">{children}</div>
    </div>
  );
}

export default React.memo(ComparisonImageCard);
