import { jsx as e, Fragment as S } from "@emotion/react/jsx-runtime";
import { useMemo as p } from "react";
import { useModuleSkeleton as f } from "@m4l/core";
import I from "clsx";
import { LazyLoadComponent as g } from "./subcomponents/LazyLoadComponent/index.js";
import { DivContainerSkeletonStyled as h, ImgSkeleton as u, ImgStyled as y } from "./slots/ImageSlots.js";
import { getPropDataTestId as C } from "../../test/getNameDataTestId.js";
import { svgDataUriSkeleton as M, IMAGE_CLASSES as k, IMAGE_KEY_COMPONENT as L } from "./constant.js";
import { ImageSlots as N } from "./slots/ImageEnum.js";
function E(d) {
  const {
    enableIntersectionObserver: s = !0,
    threshold: n = 100,
    dataTestId: a,
    className: m,
    cover: l,
    width: t,
    height: o,
    ...i
  } = d, c = f(), r = p(() => ({
    isSkeleton: c,
    cover: l
  }), [l, c]);
  return p(() => /* @__PURE__ */ e(
    g,
    {
      enableIntersectionObserver: s,
      threshold: n,
      width: t,
      height: o,
      children: /* @__PURE__ */ e(S, { children: r?.isSkeleton ? /* @__PURE__ */ e(h, { style: { width: t, height: o }, className: "M4lclassCssSpecificity", "data-testid": "skeleton-component", children: /* @__PURE__ */ e(u, { className: "M4lclassCssSpecificityIMG", src: M, alt: "Skeleton Image" }) }) : /* @__PURE__ */ e(
        y,
        {
          ownerState: { ...r },
          style: { width: t, height: o },
          ...C(L, N.root, a),
          ...i,
          className: I(k.root, m)
        }
      ) })
    }
  ), [s, n, r, t, o, a, i, m]);
}
E.isM4LImageComponent = !0;
export {
  E as Image,
  E as default
};
