import { useFieldContext } from "..";
import { Input } from "../../../components/ui/input";
import { Label } from "../../../components/ui/label";
import { FieldErrors } from "./FieldErrors";

type InputFieldProps = {
    label: string;
    inputType: string;
    required: boolean;
};
export const InputField = ({ label, inputType, required }: InputFieldProps) => {
    const field = useFieldContext<any>();

    return (
        <div className="grid gap-3">
            <Label htmlFor={field.name}>{label}</Label>
            <Input
                id={field.name}
                value={field.state.value}
                onChange={(e) => field.handleChange(e.target.value)}
                onBlur={field.handleBlur}
                type={inputType}
                required={required}
            />
            <FieldErrors meta={field.state.meta} />
        </div>
    );
};