"use client";
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
'use client';

import { cx, getStyles } from "../../../styles/styler.js";
import { HStack } from "../../HStack.js";
import { Text } from "../../Text.js";
import { Icon } from "../../Icon.js";
import { Pressable } from "../../client/Pressable.js";
import React, { useCallback } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { Radio, RadioGroup, RadioProvider } from "@ariakit/react";

//#region src/components/experimental/client/SegmentedControl.tsx
function SegmentedControl({ options, value, onChange, label, textVariant = "label2" }) {
	const activeValue = value ?? options[0]?.value;
	const handleChange = useCallback((newValue) => {
		onChange?.(newValue);
	}, [onChange]);
	return /* @__PURE__ */ jsx(RadioProvider, { children: /* @__PURE__ */ jsx(HStack, {
		asChild: true,
		spacing: "1",
		gap: "1",
		backgroundColor: "secondary",
		borderRadius: "full",
		display: "inline-flex",
		children: /* @__PURE__ */ jsx(RadioGroup, {
			"aria-label": label,
			defaultValue: activeValue,
			children: options?.map(({ label, value, startIcon, endIcon, disabled }) => {
				const isActive = value === activeValue;
				const iconVariant = isActive ? "fill" : "outline";
				const buttonStyles = getStyles({
					display: "flex",
					alignItems: "center",
					backgroundColor: isActive ? "primary" : void 0,
					spacingVertical: "1",
					spacingHorizontal: "3",
					columnGap: "1.5",
					borderWidth: "thin",
					borderRadius: "full",
					borderColor: isActive ? "muted" : "transparent",
					color: isActive ? "primary" : disabled ? "tertiary" : "muted",
					className: cx("uds-ring", disabled ? "cursor-not-allowed opacity-50 pointer-events-none" : "hover:bg-primary")
				});
				return /* @__PURE__ */ jsx(Radio, {
					value,
					"aria-label": label,
					"aria-checked": isActive,
					disabled,
					render: (props) => /* @__PURE__ */ jsxs(Pressable, {
						...props,
						onClick: () => !disabled && handleChange(value),
						className: buttonStyles,
						children: [
							startIcon && /* @__PURE__ */ jsx(Icon, {
								name: startIcon,
								variant: iconVariant,
								size: "sm",
								color: "current",
								"aria-hidden": "true"
							}),
							/* @__PURE__ */ jsx(Text, {
								variant: textVariant,
								color: "current",
								children: label
							}),
							endIcon && /* @__PURE__ */ jsx(Icon, {
								name: endIcon,
								variant: iconVariant,
								size: "sm",
								color: "current",
								"aria-hidden": "true"
							})
						]
					})
				}, value);
			})
		})
	}) });
}
SegmentedControl.displayName = "SegmentedControl";

//#endregion
export { SegmentedControl };