// components/InputFieldCustom.tsx
import React from "react";
import { useField } from "formik";

interface Props {
  label: string;
  name: string;
  type?: string;
  placeholder?: string;
  iconClass?: string;
  required?: boolean;
}

const InputFieldCustom: React.FC<Props> = ({
  label,
  name,
  type = "text",
  placeholder,
  iconClass,
  required = false
}) => {
  const [field, meta] = useField(name);
  const isError = meta.touched && meta.error;

  return (
    <div className="col-lg-3 col-md-6 col-12">
      <div className="input-style input-style-always-active has-borders has-icon validate-field mt-2">
        <div className="position-relative input-icon-position">
          {iconClass && <i className={iconClass + " color-primary"} />}
          <input
            {...field}
            type={type}
            className={`form-control validate-name ${
              isError ? "is-invalid" : ""
            }`}
            placeholder={placeholder}
          />
        </div>
        <label className="color-theme opacity-80 text-uppercase font-700 font-10">
          {label}: {required ? (<b className="color-red">*</b>) : ''}
        </label>
      {isError && (
        <div className="d-flex justify-content-between px-2">
          <div className="text-danger error-box">{meta.error}</div>
        </div>
      )}
      </div>
    </div>
  );
};

export default InputFieldCustom;