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

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

    return <div className="form-control">
        {children && <label className="block text-gray-900 dark:text-gray-200"
               htmlFor={props.id ?? undefined}>
            {children}
        </label>}
        <input className={`${className} w-full mt-2 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: any,
    placeholder?: string,
    autoFocus?: boolean,
    className?: string,
    step?: string,
    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void,
}