import {Field, Label, Input, Description} from '@headlessui/react';
import FieldControl from '../components/FieldControl';

const TextAreaField = ( {field, value, premium, onChange} ) => {
	const disabled = field.premium ?? false;
	return (
		<FieldControl id={field.id} label={field.label} premium={field.premium} help={field.description}>
				<textarea
					id={field.id}
					className="adpresso-input"
					disabled={disabled}
					value={value || ''}
					onChange={( e ) => onChange( field.id, e.target.value )}
					placeholder={field.placeholder}
					rows={field.rows || 5}
				/>
		</FieldControl>
	);
};

export default TextAreaField;