import { jsxs as s, jsx as e } from "@emotion/react/jsx-runtime";
import { ImageTextSlots as S } from "./slots/ImageTextEnum.js";
import { ImageTextContainerRoot as f, ImageContainerStyled as y, ImgStyled as I, WrapperTitleMessageStyled as h, TypographyTitleStyled as x, TypographyMessageStyled as E } from "./slots/ImageTextSlots.js";
import { IMAGE_TEXT_CLASSES as t, IMG_ALT as M, IMAGE_TEXT_KEY_COMPONENT as b } from "./constants.js";
import { clsx as u } from "clsx";
import { useRef as C } from "react";
import { useComponentSize as N } from "../../hooks/useComponentSize/index.js";
import { getPropDataTestId as _ } from "../../test/getNameDataTestId.js";
import { useIsVisible as z } from "../../hooks/useIsVisible/useIsVisible.js";
const D = (i) => {
  const { className: l, dataTestId: m, imageUrl: n, title: p, message: c, size: d, imageAriaLabel: T, ...g } = i, r = C(null), o = z(r), { currentSize: a } = N(d);
  return /* @__PURE__ */ s(
    f,
    {
      ...g,
      ..._(
        b,
        S.root,
        m
      ),
      className: u(t.root, l),
      children: [
        /* @__PURE__ */ e(y, { ref: r, ownerState: { isVisible: o }, className: t.imageContainer, children: /* @__PURE__ */ e(
          I,
          {
            src: n,
            alt: M,
            role: "presentation",
            "aria-label": T,
            ownerState: { isVisible: o }
          }
        ) }),
        /* @__PURE__ */ s(h, { className: t.wrapperTitleMessage, children: [
          /* @__PURE__ */ e(
            x,
            {
              size: a,
              skeletonWidth: 100,
              variant: "bodyDens",
              children: p
            }
          ),
          /* @__PURE__ */ e(
            E,
            {
              size: a,
              skeletonWidth: 200,
              variant: "bodySlim",
              children: c
            }
          )
        ] })
      ]
    }
  );
};
export {
  D as ImageText
};
