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

type Props = {
    text: string;
    name: string;
    placeholder: string;
    options: string[];
  }

export const Input: React.FC<Props> = ({text, name, placeholder, options}) => {
    const { register, formState: { errors } } = useFormContext();
    return(
        <>
            <label htmlFor={name} className="block text-sm font-medium text-gray-700">
                {text}
            </label>
            <input
                {...register(name,{ required: true, maxLength: 80, 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('Введите ФИО тренера команды') }
        </>
    )
}