import { jsx as r, jsxs as T } from "react/jsx-runtime";
import { classNames as c } from "./index-classNames.js";
import { ComponentContainer as u } from "./index-ComponentContainer.js";
import { Icon as h, IconSize as g } from "./index-Icon.js";
import { Text as C, TextTypes as S } from "./index-Text.js";
import { useMemo as y, useState as v } from "react";
import { a as I } from "./index-react-spring_web.modern.js";
import s from "./index-ChartTabs.module.scss.js";
import { useSpring as k } from "./index-react-spring_core.modern.js";
const X = (m) => {
  const {
    testId: i,
    tabs: a,
    onClick: n,
    defaultSelectedTab: l = 0
  } = m, f = y(() => {
    const e = a.find((t) => t.defaultSelected);
    return e ? a.indexOf(e) : l;
  }, [a]), [o, p] = v(f), d = (e) => {
    p(e), n && n(e);
  }, b = a.map((e, t) => k({
    opacity: o === t ? 1 : 0.7,
    // translation value based on the difference between selected tab and index
    transform: `translateX(${t - o === 0 ? 0 : 20}%)`,
    config: {
      tension: 100,
      friction: 25,
      duration: 150
    }
  }));
  return r(u, {
    testId: i,
    className: c(s.tabs),
    children: a.map((e, t) => T(I.div, {
      "data-testid": `ChartsTabs-btn-${e.name}`,
      style: b[t],
      className: c(s.tab, o === t && s.selected),
      onClick: () => d(t),
      children: [r(h, {
        color: o === t ? "var(--fn-fg)" : "var(--fn-fg-light)",
        type: g.small,
        children: e.icon
      }), o === t && r(C, {
        color: "var(--fn-fg)",
        type: S.text,
        textTight: !0,
        children: e.name
      })]
    }, t))
  });
};
export {
  X as ChartTabs
};
