import * as React from "react";

type FormInputProps = {
    type: string;
    name: string;
    id?: string;
    onChange?: any;
    onBlur?: any;
    value?: string | readonly string[] | number | undefined;
    placeholder: string;
    error?: string | null;
    disabled: boolean;
    autoComplete?: string | null;
}

export function FormInput({type, name, id, onChange, onBlur, value, placeholder, error, disabled, autoComplete}: FormInputProps) {
    return (
        <input
            id={id}
            disabled={disabled}
            type={type}
            name={name}
            className={`${Boolean(error) ? "form-input-error" : "form-input"}`}
            placeholder={placeholder}
            required
            onChange={onChange}
            onBlur={onBlur}
            value={value}
            autoComplete={autoComplete}/>
    )
}

type InputFormHelperProps= {
    error?: string | null;
}


export function InputFormHelper({error} : InputFormHelperProps) {
    return (
        Boolean(error) ?
            <p className="mt-2 text-sm text-red-600 dark:text-red-500">{error}</p>
            : <></>
    )
}