import { jsx } from "react/jsx-runtime";
import { tcx } from "@choiceform/design-system";
import { DotLottieReact as y0 } from "../../_vendor/@lottiefiles/dotlottie-react/dist-browser-index.js";
import { memo, useState, useEffect } from "react";
const LottiePlayer = memo(function LottiePlayer2(props) {
  const { isStreaming, src, className } = props;
  const [dotLottie, setDotLottie] = useState(null);
  const dotLottieRefCallback = (dotLottie2) => {
    setDotLottie(dotLottie2);
  };
  useEffect(() => {
    if (!dotLottie) return;
    const onLoaded = () => {
      dotLottie.setFrame(1);
      if (isStreaming) {
        dotLottie.play();
      }
    };
    if (isStreaming) {
      const anyDot2 = dotLottie;
      if (anyDot2.isLoaded) {
        dotLottie.play();
      }
    } else {
      dotLottie.setFrame(1);
      dotLottie.pause();
    }
    const anyDot = dotLottie;
    anyDot?.addEventListener?.("load", onLoaded);
    anyDot?.addEventListener?.("ready", onLoaded);
    return () => {
      anyDot?.removeEventListener?.("load", onLoaded);
      anyDot?.removeEventListener?.("ready", onLoaded);
    };
  }, [isStreaming, dotLottie]);
  return /* @__PURE__ */ jsx("div", { className: tcx("relative flex size-6 items-center justify-center", className), children: /* @__PURE__ */ jsx(
    y0,
    {
      className: "absolute -left-2 -top-2 size-10",
      src,
      loop: true,
      dotLottieRefCallback,
      renderConfig: {
        devicePixelRatio: 3
      }
    }
  ) });
});
export {
  LottiePlayer
};
//# sourceMappingURL=lottie-player.js.map
