import TextInput from '../components/TextInput';
import FieldControl from '../components/FieldControl';

const TextField = ( {field, value, onChange, variantClass} ) => {
	const inputType = ['text', 'url', 'number', 'email'].includes( field.type ) ? field.type : 'text';
	const disabled = (field.premium || field.disabled) ?? false;

	return (
		<FieldControl id={field.id} label={field.label} premium={field.premium} help={field.description} link={field.link} className={field.depends_on ? 'adpresso-field-control__child' : undefined}>
			<TextInput
				type={inputType}
				id={field.id}
				name={field.id}
				value={value}
				disabled={disabled}
				onChange={( newValue ) => onChange( field.id, newValue )}
				placeholder={field.placeholder}
				className={variantClass}
			/>
		</FieldControl>
	);
};

export default TextField;