import type { FC } from "react";
import { Modal } from "@douyinfe/semi-ui";

interface ImagePreviewModalProps {
  visible: boolean;
  onClose: () => void;
  src: string;
  alt?: string;
}

export const ImagePreviewModal: FC<ImagePreviewModalProps> = ({ visible, onClose, src, alt }) => {
  return (
    <Modal
      visible={visible}
      onCancel={onClose}
      footer={null}
      centered
      maskClosable={true}
      width={1000}
      bodyStyle={{
        padding: 0,
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        background: "transparent",
        height: "auto",
        maxHeight: "85vh",
      }}
      style={{
        maxWidth: "95vw",
        background: "transparent",
        boxShadow: "none",
      }}
    >
      <img
        src={src}
        alt={alt || "Preview"}
        style={{
          maxWidth: "100%",
          maxHeight: "80vh",
          objectFit: "contain",
          borderRadius: 8,
          boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
        }}
        onClick={(e) => e.stopPropagation()}
      />
    </Modal>
  );
};
