import { jsx } from 'react/jsx-runtime';
import { useContext } from 'react';
import { cn } from '../../../utils/cn.js';
import { Select } from '../Select/Select.js';
import '../Select/Select.theme.js';
import { ColorPickerContext } from './ColorPicker.js';

/**
 * ColorPickerFormatSelector - Dropdown to select color format (HEX/RGB/HSL)
 * Uses Flikkui Select component
 */
const ColorPickerFormatSelector = ({ className, ...props }) => {
    const context = useContext(ColorPickerContext);
    if (!context) {
        throw new Error('ColorPickerFormatSelector must be used within a ColorPicker');
    }
    const { format, setFormat, theme } = context;
    const options = [
        { id: 'hex', label: 'HEX', value: 'hex' },
        { id: 'rgb', label: 'RGB', value: 'rgb' },
        { id: 'hsl', label: 'HSL', value: 'hsl' },
    ];
    return (jsx("div", { className: cn(theme.formatSelectorStyle, className), ...props, children: jsx(Select, { value: format, onChange: (value) => setFormat(value), options: options, size: "sm", "aria-label": "Color format", wrapperClassName: "w-20" }) }));
};
ColorPickerFormatSelector.displayName = 'ColorPickerFormatSelector';

export { ColorPickerFormatSelector };
