import { clsx } from '@admin/utils';
import { FIELD_SURFACE_CLASSES } from './field-styles';

export function TextInput( {
	value,
	onChange,
	placeholder,
	suffix,
	type = 'text',
	disabled,
	label,
	style,
} ) {
	return (
		<div className="flex items-center gap-2" style={ style }>
			<input
				type={ type }
				value={ value }
				disabled={ disabled }
				aria-label={ label }
				onChange={ ( e ) => onChange( e.target.value ) }
				placeholder={ placeholder }
				className={ clsx(
					FIELD_SURFACE_CLASSES,
					'w-full px-3 py-2 placeholder:text-gray-400 disabled:bg-gray-50'
				) }
			/>
			{ suffix && (
				<span className="shrink-0 text-sm text-gray-500">
					{ suffix }
				</span>
			) }
		</div>
	);
}