import React from "react";
import "../styles/text-input.scss";
const TextInput = (props) => {
  const {
    error,
    message,
    inputClassName,
    labelClassName,
    label,
    name,
    value,
    values,
    onChange,
    id,
    type,
    disabled,
  } = props;

  return (
    <div className="pe-input-container form-floating mb-3">
      {label ? (
        <label htmlFor="signup" className="form-label">
          {label}
        </label>
      ) : (
        <></>
      )}
      {type === "select" ? (
        <select
          id={id}
          className={`form-select`}
          value={value}
          name={name}
          disabled={disabled}
          onChange={onChange}
        >
          <option
            id="ddlProducts"
            className={`select-option`}
            value=""
          ></option>
          {values.map((item, i) => (
            <option
              id="ddlProducts"
              className={`select-option`}
              key={`item${i}`}
            >
              {item}
            </option>
          ))}
        </select>
      ) : (
        <input
          id={id}
          className={`form-control ${inputClassName}`}
          value={value}
          name={name}
          disabled={disabled}
          onChange={onChange}
          type={type}
        />
      )}
      {error ? <div className="textinput-error-box">{message}</div> : <></>}
    </div>
  );
};

export default TextInput;