import React from "react";

export function Input({name, type, errors = {}, mainClasses = "mb-2", ...props}) {
	const classes = () => "input w-full h-10 " + (errors[name] ? "error" : "")

	return <div className={mainClasses}>
		<label className="block text-gray-700 text-sm font-bold mb-2" htmlFor={name}>{props.children}</label>
		<input className={classes()} id={name} name={name} ref={props.register}
		       type={type} autoComplete="off" placeholder={props.placeholder} {...props.others}
		       defaultValue={props.value && props.value} onChange={props.setValue && (e => props.setValue(e.target.value))}
		/>
		<p className="input-error">&nbsp;{errors[name]?.message}</p>
	</div>
}