"use client";
import { j as $ } from "../../../../../../../../../node_modules/.pnpm/react@19.1.0/node_modules/react/jsx-runtime.mjs";
import { useState as O, useEffect as j } from "react";
import v from "../../../../../../../../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.mjs";
import { useCarousel as g } from "../../../../../../index.mjs";
import c from "./index.module.scss.mjs";
function E({ itemIndex: e, className: f, ...p }) {
  const {
    getTimeUntilSlideFinished: o,
    totalSlideTime: y,
    slideTimeOverrideIndexToTimeMsMap: n,
    timeUntilSlideFinishedOverrideIndexToTimeMsMap: m,
    isVideoSlidePlaying: M,
    isVideoSlide: S,
    activeIndex: d,
    emblaApi: t
  } = g(), [r, T] = O(0);
  j(() => {
    const u = () => {
      T(r + 1);
    };
    return d === e && (t == null || t.on("autoplay:timerset", u)), () => {
      t == null || t.off("autoplay:timerset", u);
    };
  }, [t, d, r]);
  let i = o == null ? void 0 : o();
  Object.hasOwn(m, e) && (i = m[e].timeLeftInMs);
  let a = 0, l = 5e3, s = y;
  return Object.hasOwn(n, e) && (s = n[e]), typeof i == "number" && s && (a = (s - i) / s * 100, l = i), /* @__PURE__ */ $.jsx(
    "div",
    {
      className: v(
        c.loader,
        {
          [c.videoPlaying]: M[e] || !S
        },
        f
      ),
      style: {
        // @ts-expect-error ts does not like css vars
        "--carousel-item-initial-progress": `${a}%`,
        "--carousel-item-animation-duration": `${l}ms`
      },
      "data-testid": `carousel-controller-item-loader-${e}`,
      ...p
    },
    `slide-${e}-progress-pct-${a}-anim-duration-${l}-key-${r}`
  );
}
export {
  E as LoadBar
};
//# sourceMappingURL=index.mjs.map
