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 = false,
}: InputFieldProps) => {
	const field = useFieldContext<any>();

	return (
		<div className="grid gap-3 mt-2">
			<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>
	);
};
