import { TextControl, TextareaControl } from '@wordpress/components';

const TYPE_MAP = { text: 'text', email: 'email', tel: 'tel', url: 'url', number: 'number' };

const TextField = ({ field, value, onChange }) => {
	if (field.type === 'textarea') {
		return (
			<TextareaControl
				label={field.label}
				help={field.description}
				value={value ?? ''}
				onChange={onChange}
				id={field.name}
			/>
		);
	}

	return (
		<TextControl
			label={field.label}
			help={field.description}
			type={TYPE_MAP[field.type] || 'text'}
			value={value ?? ''}
			onChange={onChange}
			required={field.required}
			id={field.name}
		/>
	);
};

export default TextField;