import React, { InputHTMLAttributes } from "react";
import { Field, getIn, useFormikContext } from "formik";
import classNames from "classnames";

type InputProps = {
  name: string;
  className?: string;
};

const Input = ({
  name,
  className,
  ...props
}: InputProps & InputHTMLAttributes<HTMLInputElement>) => {
  const { errors } = useFormikContext();
  const error = getIn(errors, name);

  return (
    <>
      <Field
        {...props}
        id={name}
        name={name}
        className={classNames("form-control", className, {
          "is-invalid": error,
          "is-valid": !error,
        })}
        data-lpignore
      />
    </>
  );
};

export default Input;