"use client";
import { jsx as o } from "react/jsx-runtime";
import { useRef as d, useState as n, useCallback as h, useEffect as m } from "react";
import { cn as u } from "../../utils/cn/cn.es.js";
import { Tabs as p } from "./Tabs.es.js";
import r from "../../components/Tabs/tabs.module.css";
function R(i) {
  const s = d(null), [l, c] = n(!1), [a, f] = n(!1), t = h(() => {
    const e = s.current;
    e && (c(e.scrollLeft > 10), f(e.scrollLeft + e.clientWidth < e.scrollWidth - 10));
  }, []);
  return m(() => {
    const e = s.current;
    if (e)
      return t(), e.addEventListener("scroll", t), window.addEventListener("resize", t), () => {
        e.removeEventListener("scroll", t), window.removeEventListener("resize", t);
      };
  }, [t]), /* @__PURE__ */ o(
    "div",
    {
      className: u(r.tabsWrapper, {
        [r.showFadeLeft]: l,
        [r.showFadeRight]: a
      }),
      children: /* @__PURE__ */ o("div", { ref: s, className: r.tabsTape, children: /* @__PURE__ */ o(p, { ...i }) })
    }
  );
}
export {
  R as TabsWithFade
};
