import { FormikValues, useFormik } from "formik";

type FormikReturn<T extends FormikValues> = ReturnType<typeof useFormik<T>>;

interface Props<T extends FormikValues> {
	formik: FormikReturn<T>;
	name: string;
	title: string;
}

export function TextField<T extends FormikValues>({
	formik,
	name,
	title,
}: Props<T>) {
	return (
		<div className="form-group d-flex flex-column align-items-start gap-0">
			<label htmlFor={name}
				className="form-label text-nowrap mb-0">
				{title}
			</label>
			<input
				id={name}
				name={name}
				className="form-control"
				onChange={formik.handleChange}
				onBlur={formik.handleBlur}
				defaultValue={(formik.values as never)[name]}
				disabled={formik.isSubmitting}
			/>
			{
				(formik.touched as never)[name]
				&& (formik.errors as never)[name]
				&& (
					<span className="text-danger">{(formik.errors as never)[name]}</span>
				)
			}
		</div>
	)
}