import { jsx as f } from "@emotion/react/jsx-runtime";
import { forwardRef as a, useState as u, useRef as l, useImperativeHandle as I, useEffect as d } from "react";
import { IntersectComponentStyled as v } from "../../slots/ImageSlots.js";
import { getPropDataTestId as b } from "../../../../test/getNameDataTestId.js";
import { IMAGE_KEY_COMPONENT as g } from "../../constant.js";
import { ImageSlots as E } from "../../slots/ImageEnum.js";
const S = (e) => {
  e.forEach((o) => {
    o.isIntersecting && o.target?.setIsVisible(!0);
  });
}, n = {}, C = (e) => (n[e] = n[e] || new IntersectionObserver(S, {
  rootMargin: e + "px"
}), n[e]), O = a(
  (e, o) => {
    const { setIsVisible: s, threshold: m, dataTestId: p, width: i, height: c } = e, [r] = u(C(m)), t = l(null);
    return I(o, () => t.current), d(() => (r && t.current && (t.current.setIsVisible = s, r.observe(t.current)), () => {
      r && t.current && r.unobserve(t.current);
    }), [r, s]), /* span (IntersectCompoonentStyled): Elemento usado para ser la referencia en el funcionamiento del intersectionObserver. */
    /* @__PURE__ */ f(
      v,
      {
        ref: t,
        style: i !== void 0 && c !== void 0 ? { width: i, height: c } : void 0,
        ...b(g, E.intersectComponent, p)
      }
    );
  }
);
O.displayName = "IntersectComponent";
export {
  O as IntersectComponent
};
