import { useInputValidation } from "../../../hook/useInputValidation";
import { cx } from "../../../utils";
import * as inputStyles from "../input/input.css";
import * as styles from "./select.css";
/**
 * A styled select component with built-in validation support.
 *
 * @remarks
 * This component integrates with `useInputValidation` to handle real-time validation
 * and error reporting. It shares styling with the {@link Input} component for consistency.
 *
 * @param props - The component props.
 * @returns The rendered select element.
 *
 * @example
 * ```tsx
 * import { enum_ } from 'valibot';
 * import { Select, Option } from './select';
 *
 * enum Role { Admin = 'admin', User = 'user' }
 * const roleSchema = enum_(Role);
 *
 * function RoleSelect() {
 *   return (
 *     <Select name="role" validate={roleSchema}>
 *       <Option value="admin">Admin</Option>
 *       <Option value="user">User</Option>
 *     </Select>
 *   );
 * }
 * ```
 */
export function Select({ className = "", validate, onValidationError, onChange, onBlur, children, ...props }) {
    let handlers = useInputValidation({
        name: props.name,
        validate,
        required: props.required,
        onValidationError,
        onChange,
        onBlur,
    });
    return (<select {...props} onChange={handlers.onChange} onBlur={handlers.onBlur} className={cx(className, styles.select, inputStyles.input)}>
			{children}
		</select>);
}
/**
 * A styled option component for use within {@link Select}.
 *
 * @param props - Standard HTML option attributes.
 * @returns The rendered option element.
 *
 * @example
 * ```tsx
 * <Option value="1">Option 1</Option>
 * ```
 */
export let Option = ({ className = "", children, ...props }) => {
    return (<option {...props} className={cx(className, styles.option)}>
			{children}
		</option>);
};
/**
 * A styled optgroup component for grouping options within {@link Select}.
 *
 * @param props - Standard HTML optgroup attributes.
 * @returns The rendered optgroup element.
 *
 * @example
 * ```tsx
 * <Select name="food">
 *   <Optgroup label="Fruits">
 *     <Option value="apple">Apple</Option>
 *     <Option value="banana">Banana</Option>
 *   </Optgroup>
 *   <Optgroup label="Vegetables">
 *     <Option value="carrot">Carrot</Option>
 *   </Optgroup>
 * </Select>
 * ```
 */
export let Optgroup = ({ className = "", children, ...props }) => {
    return (<optgroup {...props} className={cx(className, styles.optgroup)}>
			{children}
		</optgroup>);
};