import { jsx as u } from "@emotion/react/jsx-runtime";
import { useState as a, useRef as m, useEffect as b } from "react";
import { styled as I } from "@mui/material/styles";
const d = (e) => {
  e.forEach((t) => {
    t.isIntersecting && t.target?.setIsVisible(!0);
  });
}, n = {}, g = (e) => (n[e] = n[e] || new IntersectionObserver(d, {
  rootMargin: e + "px"
}), n[e]), l = I("div")(
  ({ minHeight: e }) => ({
    minHeight: `${e}px`,
    width: "100%"
  })
);
function x(e) {
  const { setIsVisible: t, threshold: o, minHeight: c = 120, rowKey: f } = e, [r] = a(
    g(o)
  ), i = m(null);
  return b(() => {
    const s = i.current;
    return r && s && (s.setIsVisible = t, r.observe(s)), () => {
      r && s && r.unobserve(s);
    };
  }, [r, t]), /* @__PURE__ */ u(
    l,
    {
      ref: i,
      minHeight: c,
      "data-row-key": f
    }
  );
}
export {
  x as IntersectCard
};
