import React from 'react';
import uniqid from 'uniqid';

const Input = ({ className, Ico, labelClasses, wrapperClasses, name, errors, validation, register, ...props }) => {

    const uid = uniqid();

    return (
        <div className={['flex relative w-full', wrapperClasses].join(' ')}>
            <Ico className="text-white text-xl absolute top-1/2 -translate-y-1/2"/>
            <input {...register && name ? {...register(name, validation)} : null} id={uid} className={['w-full bg-transparent border-b-[1px] py-2 pl-[30px] pr-4 px-5 placeholder:text-white text-base font-normal text-white focus:outline-none focus:border-b-red-500 ', className].join(' ')} {...props} />
            {errors &&
                errors[name] &&
                <p className="text-red-600 absolute -bottom-0.5 translate-y-full">{errors[name]?.message}</p>
            }
        </div>
    );
}

export default Input;