/* eslint-disable @typescript-eslint/no-explicit-any */
interface InputFieldProps {
  icon: string;
  label: string;
  placeholder: string;
  value: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  type?: string;
  step?: string;
  errors?: any;
  name: string;
  page?: string;
}

const InputFieldCustom: React.FC<InputFieldProps> = ({
  icon,
  label,
  placeholder,
  value,
  onChange,
  type = "text", // default to "text" if not provided
  step,
  errors,
  name,
  page = "",
}) => (
  <div className="col-lg-4">
    {page == "my-profile" ? (
      <div className="input-outer-box mb-3">
        <div className="input-style input-style-always-active has-borders has-icon validate-field mb-0">
          <i className={`ri ${icon} color-blue-dark`} />
          <input
            type={type}
            step={step}
            className={`form-control validate-name ${
              errors?.[name] ? "is-invalid" : ""
            }`}
            value={value}
            onChange={onChange}
            placeholder={placeholder}
          />
          <label className="color-theme opacity-50 text-uppercase font-700 font-10">
            {label}
          </label>
        </div>
        {errors?.[name] && (
          <div className="text-danger px-2 error-box select-error">
            {errors?.[name]}
          </div>
        )}
      </div>
    ) : (
      <div className="input-style input-style-always-active has-borders has-icon validate-field">
        <i className={`fa ${icon} color-blue-dark`} />
        <input
          type={type}
          step={step}
          className={`form-control validate-name ${
            errors?.[name] ? "is-invalid" : ""
          }`}
          value={value}
          onChange={onChange}
          placeholder={placeholder}
        />
        <label className="color-theme opacity-50 text-uppercase font-700 font-10">
          {label}
        </label>
        {errors?.[name] && (
          <div className="text-danger px-2 error-box select-error">
            {errors?.[name]}
          </div>
        )}
      </div>
    )}
  </div>
);

export default InputFieldCustom;