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