import { jsxs as S, Fragment as h, jsx as i } from "@emotion/react/jsx-runtime";
import { useMemo as f } from "react";
import { ImageStyled as x, TextImageStyled as T, RootStyled as v } from "./slots/ImageFormatterSlots.js";
import { ImageFormatterSlots as s } from "./slots/ImageFormatterEnum.js";
import u from "clsx";
import { getComponentSlotRoot as y } from "../../../utils/getComponentSlotRoot.js";
import { getPropDataTestId as d } from "../../../test/getNameDataTestId.js";
import { IMAGE_FORMATTER_KEY_COMPONENT as m } from "./constants.js";
function j(p) {
  const { src: c, alt: l, text: a, width: t, height: e, cover: o, dataTestId: r, className: g } = p, n = f(
    () => ({
      width: t,
      height: e,
      hasDefinedSize: t !== void 0 && e !== void 0,
      cover: o
    }),
    [t, e, o]
  ), I = f(() => /* @__PURE__ */ S(h, { children: [
    /* @__PURE__ */ i(
      x,
      {
        ownerState: n,
        ...d(
          m,
          s.image,
          r
        ),
        src: c,
        alt: l,
        width: t,
        height: e,
        cover: o,
        enableIntersectionObserver: !1
      }
    ),
    a && /* @__PURE__ */ i(
      T,
      {
        ...d(
          m,
          s.textImage,
          r
        ),
        variant: "bodyStandard",
        children: a
      }
    )
  ] }), [c, l, a, t, e, o, r, n]);
  return /* @__PURE__ */ i(
    v,
    {
      ownerState: n,
      className: u(
        y(m),
        g
      ),
      ...d(
        m,
        s.root,
        r
      ),
      children: I
    }
  );
}
export {
  j as ImageFormatter
};
