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

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

    const uid = uniqid();

    return (
        <div className={['flex flex-col relative', wrapperClasses].join(' ')}>
            {label &&
                <label className={['mb-3 text-white', labelClasses].join(' ')} htmlFor={uid}>{label}</label>
            }
            <input {...register && name ? {...register(name, validation)} : null} id={uid} className={['bg-white rounded-md py-3 px-5 text-base text-gray-800', className].join(' ')} {...props} />
            {errors[name] &&
                <p className="text-red-600 absolute -bottom-0.5 translate-y-full">{errors[name]?.message}</p>
            }
        </div>
    );
}

export default Input;
