import { jsx as l, jsxs as S } from "react/jsx-runtime";
import { w100 as F, dFlexRow as $, dFlex as j } from "./index-general.module.js";
import { classNames as c } from "./index-classNames.js";
import { ComponentContainer as w } from "./index-ComponentContainer.js";
import { Text as C } from "./index-Text.js";
import { useState as I } from "react";
import e from "./index-TogglerWithText.module.scss.js";
const h = (t, n, a, i) => {
  const s = n ? a : i;
  return typeof t == "string" ? l(C, {
    color: s,
    children: t
  }) : t.component ? t.component : l(C, {
    color: s,
    children: t.value
  });
}, z = (t) => {
  const {
    onChange: n,
    left: a,
    right: i,
    testId: s,
    togglerState: x,
    activeBgColor: m = "--n000",
    bgColor: T = "--n200",
    activeTextColor: g = "--n700",
    textColor: d = "--n500",
    setLeftActive: f,
    className: u,
    theme: k = "default"
  } = t, [r, y] = I(x), p = (o, b, v) => {
    y(o), v && v(o == "left"), n && n(N(b));
  }, N = (o) => typeof o == "string" ? o : o.value;
  return l(w, {
    className: c(k == "default" ? e.vanguardToggler : e.vanguardTogglerSquare, u || ""),
    style: {
      backgroundColor: `var(${T})`
    },
    testId: s,
    children: S("div", {
      className: c(e.slider, j, $, F),
      children: [l("div", {
        "data-testid": "left",
        className: c(r == "left" ? e.active : null, e.sliderOptionLeft),
        style: r == "left" ? {
          backgroundColor: `var(${m})`
        } : {},
        onClick: () => p("left", a, f),
        children: h(a, r === "left", g, d)
      }), l("div", {
        "data-testid": "right",
        className: c(r == "right" ? e.active : null, e.sliderOptionRight),
        style: r == "right" ? {
          backgroundColor: `var(${m})`
        } : {},
        onClick: () => p("right", i, f),
        children: h(i, r === "right", g, d)
      })]
    })
  });
};
export {
  z as TogglerWithText
};
