import React from 'react';
import { useFormContext } from "react-hook-form";
import { Alert } from './'

type Props = {
    text: string;
    name: string;
    placeholder: string;
    additional: string;
  }

export const Input: React.FC<Props> = ({text, name, placeholder, additional}) => {
    const { register, formState: { errors } } = useFormContext();
    const options = {required: true, maxLength: 80, additional};
    console.log(errors.name);
    return(
        <>
            <label htmlFor={name} className="block text-sm font-medium text-gray-700">
                {text}
            </label>
            <input
                {...register(name, options )}
                    name={name}
                    placeholder={placeholder}
                    className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
            />
            {errors[name] && <Alert text='Данное поле незаполнено'/> }
        </>
    )
}