import { getColor } from "../styles/themes.js";
import { Icon } from "./Icon/Icon.js";
import styled from "@emotion/styled";
import { createElement } from "@emotion/react";
import { jsx } from "@emotion/react/jsx-runtime";
//#region src/components/MultiToggle.tsx
function MultiToggle({ options, selectedOption, onChange, selectedBgColor = "c1Neutral", selectedColor = "hcNeutral", bgColor = "c4Neutral", color = "mcNeutral" }) {
	return /* @__PURE__ */ jsx(StyledMultiToggle, {
		bgColor,
		children: options.map(({ key, ...optionProps }) => {
			let content = null;
			if ("name" in optionProps) content = /* @__PURE__ */ createElement(Icon, {
				...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);
		})
	});
}
const StyledMultiToggle = styled.div`
  border-radius: 999px;
  background: ${({ theme, bgColor }) => getColor(theme, bgColor)};
  padding: 2px;
  gap: 2px;
  display: flex;
`;
const StyledMultiToggleOption = styled.div`
  display: flex;
  cursor: pointer;
  border-radius: 999px;
  padding: 4px;
  background: ${({ theme, selected, selectedBgColor }) => selected ? getColor(theme, selectedBgColor) : "transparent"};
`;
//#endregion
export { MultiToggle };
