import { jsx as m } from "react/jsx-runtime";
import { useMemo as T } from "react";
import C from "../../utils/classNames.js";
import H from "../../hooks/useResizeObserver.js";
import A from "./TrackerBlock.js";
const E = 5, O = 10, F = 2, G = 30, R = (d) => {
  const {
    data: t,
    defaultBackgroundColor: k = "bg-success",
    hoverEffect: p = !1,
    minBlockWidth: M = E,
    maxBlockWidth: b = O,
    blockGap: B = F,
    blockHeight: W = G,
    collapseOnMinBlockWidth: n = !0,
    collapseShowLastBlocks: r = !1,
    className: f
  } = d, [g, I, { inlineSize: h }] = H(), c = Math.max(1, M), l = Math.max(c, b), a = Math.max(0, B), x = Math.max(1, W), { visibleData: u, blockWidth: _ } = T(() => {
    if (t.length === 0)
      return { visibleData: t, blockWidth: l };
    const e = h ?? t.length * l + (t.length - 1) * a, s = Math.max(
      1,
      Math.floor((e + a) / (c + a))
    ), o = n ? Math.min(t.length, s) : t.length, i = r ? t.slice(-o) : t.slice(0, o), D = Math.max(0, e - (i.length - 1) * a) / i.length, L = Math.max(c, Math.min(l, D));
    return { visibleData: i, blockWidth: L };
  }, [
    t,
    h,
    c,
    l,
    a,
    n,
    r
  ]), v = C("tracker", f);
  return /* @__PURE__ */ m("div", { ref: g, className: v, style: { gap: `${a}px` }, children: u.map((e, s) => {
    const o = e.id ?? `${s}`;
    return /* @__PURE__ */ m(
      A,
      {
        id: o,
        block: e,
        defaultBackgroundColor: k,
        hoverEffect: p,
        blockWidth: _,
        blockHeight: x
      },
      o
    );
  }) });
};
export {
  R as default
};
//# sourceMappingURL=Tracker.js.map
