import React, {
    FC, HTMLInputTypeAttribute,
    ReactElement
} from "react"

const Field: FC<FieldProps> = ({children, type = 'text', className = '', classNameForm = '', ...props}) => {

    return <div className={`form-control ${classNameForm}`}>
        {children && <label className="block text-gray-900 dark:text-gray-200"
               htmlFor={props.id ?? undefined}>
            {children}
        </label>}
        <input className={`${className} mt-2 w-full rounded dark:bg-gray-700`}
               type={type}
               {...props}/>
        <div className={`error-message`} />
    </div>
}

export default Field

interface FieldProps {
    children?: ReactElement|string,
    type?: HTMLInputTypeAttribute,
    name: string,
    id?: string,
    value: string|number|undefined,
    placeholder?: string,
    autoFocus?: boolean,
    className?: string,
    classNameForm?: string,
    step?: string,
    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void,
}

export const TextArea: FC<TextAreaProps> = ({children, name, value,  className = '', classNameForm = '', ...props}) => {

    return <div className={`form-control ${classNameForm}`}>
        {children && <label className="block text-gray-900 dark:text-gray-200"
                            htmlFor={props.id ?? undefined}>
            {children}
        </label>}
        <textarea name={name} className={`${className} mt-2 w-full rounded dark:bg-gray-700`} {...props}>
            {value}
        </textarea>
        <div className={`error-message`}/>
    </div>
}

interface TextAreaProps {
    children?: ReactElement|string,
    id?: string,
    name: string,
    value: string|undefined,
    className?: string,
    classNameForm?: string,
    onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void,
}