import React from "react";

interface InputCompOneProps {
  label: string;
  labelClass: string;
  placeholder?: string;
  value: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  onInput?: (e: React.FormEvent<HTMLInputElement>) => void;
  name: string;
  tabIndex?: number;
  ref?: React.RefObject<HTMLInputElement>;
  selectValue?: string;
  labelSpan?: string;
  labelSpanClass?: string;
  parentInputClass?: string;
  inputClass?: string;
  parentSelectClass?: string;
  selectClass?: string;
  input?: boolean;
  select?: boolean;
  inputType?: string;
  selectOptions?: { value: string; label: string }[];
  icon?: string | React.ReactNode; // Type for the icon
}

const InputCompOne: React.FC<InputCompOneProps> = ({
  label,
  labelClass,
  labelSpan,
  labelSpanClass,
  placeholder = "Placeholder",
  value,
  onChange,
  onInput,
  name,
  tabIndex,
  ref,
  selectValue,
  input,
  select,
  inputType = "text",
  selectOptions,
  icon,
  selectClass,
  inputClass,
  parentInputClass,
  parentSelectClass,
}) => {
  return (
    <div className={parentInputClass}>
      {label && (
        <label htmlFor={name} className={`flex items-center ${labelClass}`}>
          {label}
          {labelSpan && <span className={labelSpanClass}>{labelSpan}</span>}
        </label>
      )}
      {input && (
        <div className="flex items-center">
          <input
            type={inputType}
            placeholder={placeholder}
            value={value}
            onChange={onChange}
            onInput={onInput}
            name={name}
            tabIndex={tabIndex}
            ref={ref}
            className={inputClass}
          />
          {icon && (
            <div className="">
              {typeof icon === "string" ? <img src={icon} alt="icon" /> : icon}
            </div>
          )}
        </div>
      )}
      {select && (
        <div className={parentSelectClass}>
          <select name={name} id="" value={selectValue} className={selectClass}>
            {selectOptions?.map((option) => (
              <option key={option.value} value={option.value}>
                {option.label}
              </option>
            ))}
          </select>
        </div>
      )}
    </div>
  );
};

export default InputCompOne;