import React, { useMemo } from "react";
import { Image } from "antd-mobile";
export default function OwnImage({
  src,
  width = "100%",
  height = "100%",
  className,
  outClassName,
  roundedFull,
  rounded,
  ...others
}) {
  const loadingImage = useMemo(
    () => (
      <div
        className={`bg-gray-700  absolute top-0 z-0  animate-pulse ${
          roundedFull ? "rounded-full" : rounded
        }`}
      />
    ),
    []
  );
  return (
    <div
      className={`flex flex-col justify-center items-center relative ${outClassName}`}
    >
      <div className={`${className}`}>
        <Image
          height={height}
          width={width}
          fit="cover"
          src={src}
          className={roundedFull ? "rounded-full" : rounded}
          // placeholder=""
          fallback={loadingImage}
          placeholder={loadingImage}
          {...others}
        />
        <div className="w-full h-full bg-transparent absolute top-0 z-20" />
      </div>
    </div>
  );
}