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

const TokenInputField = ( {field, value, onChange} ) => {
	// A saved value can be a non-array (e.g. a plain string).
	const tokens = Array.isArray( value ) ? value : [];

	const handleTagsChange = ( newTags ) => {
		onChange( field.id, newTags );
	};

	return (
		<FieldControl label={field.label} help={field.description} id={field.id} link={field.link}>
			<TokenInput
				tokens={tokens}
				onChange={handleTagsChange}
				placeholder={field.placeholder || 'Add...'}
			/>
		</FieldControl>
	);
};

export default TokenInputField;