import { jsx } from 'react/jsx-runtime';
import React__default, { useContext } from 'react';
import { cn } from '../../../utils/cn.js';
import { segmentedItemTheme } from './Segmented.theme.js';
import { SegmentedContext } from './SegmentedContext.js';

const SegmentedItem = React__default.forwardRef(({ value, disabled = false, children, className, onClick, ...props }, ref) => {
    const context = useContext(SegmentedContext);
    if (!context) {
        throw new Error("SegmentedItem must be used within a Segmented component");
    }
    const { selectedValue, onChange, size, disabled: contextDisabled } = context;
    const isSelected = value === selectedValue;
    const isDisabled = disabled || contextDisabled;
    const handleClick = (event) => {
        if (isDisabled)
            return;
        onChange === null || onChange === void 0 ? void 0 : onChange(value);
        onClick === null || onClick === void 0 ? void 0 : onClick(event);
    };
    return (jsx("button", { ref: ref, type: "button", role: "tab", "aria-selected": isSelected, disabled: isDisabled, className: cn(segmentedItemTheme.baseStyle, segmentedItemTheme.sizes[size], isSelected
            ? segmentedItemTheme.selectedStyle
            : segmentedItemTheme.unselectedStyle, isDisabled && segmentedItemTheme.disabledStyle, className // User overrides take precedence
        ), onClick: handleClick, "data-value": value, "data-selected": isSelected, "data-disabled": isDisabled, ...props, children: children }));
});
// Set display name for dev tools and Storybook
SegmentedItem.displayName = "Segmented.Item";

export { SegmentedItem };
