import React from 'react';
import { CloseOutlined } from '@ant-design/icons';
import './ImagePreview.less';

interface ImagePreviewProps {
  src: string | null;
  onClose: () => void;
}

const ImagePreview: React.FC<ImagePreviewProps> = ({ src, onClose }) => {
  if (!src) return null;

  return (
    <>
      <div 
        className="image-preview-mask"
        onClick={onClose}
      />
      <div className="image-preview-container" onClick={onClose}>
        <img 
          src={src} 
          alt="预览" 
          className="image-preview"
          onClick={(e) => e.stopPropagation()}
        />
        <CloseOutlined 
          className="image-preview-close" 
          onClick={onClose}
        />
      </div>
    </>
  );
};

export default ImagePreview;