import {Input} from '@headlessui/react';

/**
 * A headless-based Text Input component.
 * replacement for WordPress TextControl.
 *
 * @param {string} value - The current value.
 * @param {function} onChange - Callback receiving the NEW VALUE (string), not the event.
 * @param {string} placeholder - Placeholder text.
 * @param {string} className - Additional classes.
 * @param {string} type - Input type (text, email, number, etc.), default: 'text'.
 * @param icon
 * @param onIconClick
 * @param {object} props - Any other props passed to the input.
 */
const TextInput = ( {
						value,
						onChange,
						placeholder,
						className = '',
						type = 'text',
						icon = null,
						onIconClick,
						...props
					} ) => {
	const inputElement = (
		<Input
			type={type}
			className={icon ? 'adpresso-input-reset' : `adpresso-input ${className}`}
			value={value || ''}
			onChange={( e ) => onChange( e.target.value )}
			placeholder={placeholder}
			autoComplete="off"
			{...props}
		/>
	);

	if ( !icon ) {
		return inputElement;
	}

	return (
		<label className={`adpresso-chip ${className}`}>
			<span className={`adpresso-th__icon dashicons ${icon}`} aria-hidden="true" onClick={onIconClick}></span>
			{inputElement}
		</label>
	);
};

export default TextInput;