import {
  Icon
} from "./chunk-DMPXNHDT.js";
import {
  getColor
} from "./chunk-VAH342U2.js";
import {
  __objRest,
  __spreadProps,
  __spreadValues
} from "./chunk-W7FAWX6T.js";

// src/components/MultiToggle.tsx
import styled from "@emotion/styled";
import { jsx } from "@emotion/react/jsx-runtime";
import { createElement } from "@emotion/react";
function MultiToggle({
  options,
  selectedOption,
  onChange,
  selectedBgColor = "c1Neutral",
  selectedColor = "hcNeutral",
  bgColor = "c4Neutral",
  color = "mcNeutral"
}) {
  return /* @__PURE__ */ jsx(StyledMultiToggle, { bgColor, children: options.map((_a) => {
    var _b = _a, { key } = _b, optionProps = __objRest(_b, ["key"]);
    let content = null;
    if ("name" in optionProps) {
      content = /* @__PURE__ */ createElement(
        Icon,
        __spreadProps(__spreadValues({}, optionProps), {
          width: 11,
          key,
          color: key === selectedOption ? selectedColor : color
        })
      );
    } else {
      content = /* @__PURE__ */ jsx("span", { css: { fontSize: "11px", lineHeight: "11px" }, children: optionProps.text });
    }
    return /* @__PURE__ */ jsx(
      StyledMultiToggleOption,
      {
        onClick: () => onChange(key),
        selected: key === selectedOption,
        selectedBgColor,
        selectedColor,
        colorProp: color,
        children: content
      },
      key
    );
  }) });
}
var StyledMultiToggle = styled.div`
  border-radius: 999px;
  background: ${({ theme, bgColor }) => getColor(theme, bgColor)};
  padding: 2px;
  gap: 2px;
  display: flex;
`;
var StyledMultiToggleOption = styled.div`
  display: flex;
  cursor: pointer;
  border-radius: 999px;
  padding: 4px;
  background: ${({ theme, selected, selectedBgColor }) => selected ? getColor(theme, selectedBgColor) : "transparent"};
`;

export {
  MultiToggle
};
