import React from "react";
import styles from "./index.module.scss";
import imgLoding from "@/assets/img/loading.gif";
import imgErr from "@/assets/img/IMGerror.png";
import { Image } from "antd-mobile";
import { baseUrl } from "@/index";

type Props = {
  width?: number | string;
  height?: number | string;
  src: string;
  noLook?: boolean;
  offline?: boolean;
};

function ImageLazy({
  width = 100,
  height = 100,
  src,
  noLook,
  offline = false,
}: Props) {
  return (
    <div className={styles.ImageLazy} style={{ width: width, height: height }}>
      <div className="lazyBox">
        <Image
          lazy
          src={src ? (offline ? src : baseUrl + src) : ""}
          placeholder={<img src={imgLoding} alt="" />}
          fallback={<img src={imgErr} alt="" />}
          fit="cover"
        />
      </div>
    </div>
  );
}

const MemoImageLazy = React.memo(ImageLazy);

export default MemoImageLazy;
