const Input = (props) => {

	const fields = [
		'name',
		'value',
		'type',
		'disabled',
		'placeholder',
		'required',
	]

 	const onChangeVal = evt => {

 		const { name, value, checked } = evt.target
 			, { onChange, type } = props

		if (typeof onChange === 'function')
			onChange(name, type === 'checkbox' ? checked : value)
	}

	const attrs = {
		className: 'form-control ' + (props.inputClassName || ' '),
		onChange: onChangeVal
	}

	fields.forEach(field => {

		attrs[field] = props[field]
	})

	if (!attrs.value) attrs.value = '';

	if (props.type === 'textarea')
		return <textarea {...attrs} />

    return  <input {...attrs} />
}

const InputWrapper = (props) => {

	const { className, label, error, children } = props

	return (

		<div className={`form-group ${className || ''}`}>
			<label className="form-lb">{label}</label>
			<Input {...props}/>
			{children}
			{error && <span className="error">{error}</span>}
		</div>
	)
}

export default InputWrapper