import { InputItem, Label, AlertText, TextInput } from '../../styles/Components';

const AccountInputItem = ({ title, type, name, placeholder, value, onChange, ref, register, errors, length }) => {
	return (
		<InputItem>
			<Label require="true">{title}</Label>
			<TextInput fontSize="15px" $padding="16px 20px" type={type} name={name} placeholder={placeholder} onChange={onChange} ref={ref} required {...register(name)} maxlength={length} />
			<AlertText>{errors[`${name}`] && errors[`${name}`].message}</AlertText>
		</InputItem>
	);
};

export default AccountInputItem;
