/**
 * ComboboxSearch
 *
 * Search input for the NodeTypeCombobox: text input with combobox
 * ARIA role, opens dropdown on focus and typing.
 *
 * Extracted from NodeTypeCombobox.tsx in v1.5.0.
 *
 * @since 1.5.0
 */

import React from 'react';

// --- Types ---

export interface ComboboxSearchProps {
	/** Ref to attach to the input element */
	inputRef?: React.Ref<HTMLInputElement>;
	/** Current search value */
	value: string;
	/** Search value change handler */
	onChange: (value: string) => void;
	/** Key down handler for navigation */
	onKeyDown: (e: React.KeyboardEvent) => void;
	/** Focus handler */
	onFocus: () => void;
	/** Placeholder text */
	placeholder?: string;
	/** Disabled state */
	disabled?: boolean;
	/** Whether dropdown is expanded */
	isOpen: boolean;
	/** Custom styles */
	style?: React.CSSProperties;
}

// --- Default style ---

const defaultInputStyle: React.CSSProperties = {
	width: '100%',
	padding: '8px 12px',
	fontSize: '14px',
	border: '1px solid #ddd',
	borderRadius: '6px',
	outline: 'none',
	backgroundColor: '#fff',
};

// --- Component ---

export function ComboboxSearch({
	inputRef,
	value,
	onChange,
	onKeyDown,
	onFocus,
	placeholder = 'Search...',
	disabled = false,
	isOpen,
	style,
}: ComboboxSearchProps) {
	return (
		<input
			ref={inputRef}
			type="text"
			value={value}
			onChange={(e) => onChange(e.target.value)}
			onFocus={onFocus}
			onKeyDown={onKeyDown}
			placeholder={placeholder}
			disabled={disabled}
			style={{ ...defaultInputStyle, ...style }}
			aria-expanded={isOpen}
			aria-haspopup="listbox"
			aria-autocomplete="list"
			role="combobox"
		/>
	);
}
