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

type InputFieldProps = {
	label: string;
	inputType: string;
	required: boolean;
};

const autoCompleteMap: Record<string, string> = {
	email: "email",
	password: "current-password",
	text: "off",
	username: "username",
};

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}
				autoComplete={autoCompleteMap[inputType] ?? "off"}
				value={field.state.value}
				onChange={(e) => field.handleChange(e.target.value)}
				onBlur={field.handleBlur}
				type={inputType}
				required={required}
			/>
			<FieldErrors meta={field.state.meta} />
		</div>
	);
};