import React from 'react';
import { ThemeOverrideProps, ThemeMode, ProductContext } from '@xsolla/xui-core';

interface SelectOption {
    label: string;
    value: any;
    disabled?: boolean;
}
interface SelectProps extends ThemeOverrideProps {
    value?: string;
    placeholder?: string;
    onPress?: () => void;
    size?: "xl" | "lg" | "md" | "sm" | "xs";
    state?: "default" | "hover" | "focus" | "disable" | "error";
    disabled?: boolean;
    label?: string;
    errorMessage?: string;
    iconLeft?: React.ReactNode;
    iconRight?: React.ReactNode;
    filled?: boolean;
    iconOnly?: boolean;
    options?: (string | SelectOption)[];
    onChange?: (value: string) => void;
    searchable?: boolean;
    searchPlaceholder?: string;
    noOptionsMessage?: string;
    /** Show a clear button to reset the selected value (field variant only) */
    clearable?: boolean;
    /** Called when the clear button is pressed */
    onClear?: () => void;
    maxHeight?: number;
    /**
     * Width of the dropdown popover. By default the popover matches the Select
     * trigger's width (`100%` of the field). Pass a number (px) or any CSS width
     * string (e.g. `320`, `"24rem"`) to size the popover independently of the
     * trigger — useful when option labels are wider than the field.
     */
    popoverWidth?: number | string;
    fullWidth?: boolean;
    testID?: string;
    /** Theme mode for the dropdown overlay. Defaults to themeMode when not set. */
    overlayThemeMode?: ThemeMode;
    /** Product context for the dropdown overlay. Defaults to themeProductContext when not set. */
    overlayThemeProductContext?: ProductContext;
    /** Preferred side for the dropdown. Default: "bottom". */
    side?: "top" | "bottom";
    /** When true, the dropdown flips to the opposite side when there isn't enough viewport space. Default: false. */
    autoFlip?: boolean;
}
declare const Select: React.FC<SelectProps>;

export { Select, type SelectOption, type SelectProps };