/**
 * 图片预览组件
 * 显示图片预览及基本信息，支持错误处理和点击放大
 * 
 * 用法:
 * <ImagePreview 
 *   image={imageObject} 
 *   isInModal={false} 
 *   onEnlarge={handleEnlarge} 
 * />
 * 
 * @param {Object} image - 图片数据对象
 * @param {boolean} [isInModal=false] - 是否在模态框中显示
 * @param {function} [onEnlarge] - 点击放大回调函数
 */
import React from 'react';
import DTAI_SITE from './DEFINE.js';

const ImagePreview = ({ image, isInModal = false, onEnlarge }) => {
  /**
   * 获取图片预览URL
   * @param {string} imagePath - 图片路径
   * @returns {string} 完整图片URL
   */
  const getImagePreviewUrl = (imagePath) => {
    if (!imagePath) return '';
    return `${DTAI_SITE}${imagePath}`;
  };

  const previewUrl = getImagePreviewUrl(image.imagePath);
  const imageSizeInfo = image.imageSize ? `大小: ${image.imageSize}` : '大小: 未知';
  const resolutionInfo = image.imageWidth && image.imageHeight 
    ? `分辨率: ${image.imageResolution}` 
    : '分辨率: 未知';
  
  return (
    <div className={`image-preview-container ${isInModal ? 'modal-preview' : ''}`}>
      {previewUrl ? (
        <div className="image-wrapper">
          <img 
            src={previewUrl} 
            alt={image.imageName || '预览图'} 
            className="image-preview"
            onError={(e) => {
              e.target.onerror = null;
              e.target.src = './pictures/R-C.jpg'; 
            }}
            title={`${imageSizeInfo}\n${resolutionInfo}`}
            onClick={isInModal && onEnlarge ? () => onEnlarge(previewUrl) : undefined}
          />
          <div className="image-hover-info">
            <div>{imageSizeInfo}</div>
            <div>{resolutionInfo}</div>
          </div>
        </div>
      ) : (
        <div className="image-preview-placeholder">无预览图</div>
      )}
    </div>
  );
};

export default ImagePreview;