import { Image as NutImage } from "@nutui/nutui-react-taro";
import { View } from "@tarojs/components";
import { useEffect, useRef } from "react";
import "./index.scss";

interface CustomImageProps {
  src: string;
  width?: string | number;
  height?: string | number;
  mode?: string;
  onClick?: (e: any) => void;
  style?: any;
  className?: string;
}

const CustomImage = (props: CustomImageProps) => {
  const imageRef = useRef<any>(null);

  useEffect(() => {
    // 在组件挂载后，移除可能存在的 webkit-mask 样式
    if (imageRef.current) {
      const element = imageRef.current;
      if (element.style) {
        element.style.webkitMask = "none";
        element.style.mask = "none";
        element.style.webkitMaskImage = "none";
        element.style.maskImage = "none";
      }
    }
  }, []);

  return (
    <View ref={imageRef} className="custom-image-wrapper">
      <NutImage {...props} />
    </View>
  );
};

export default CustomImage;