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

  return (
    <div
      className={
        inputClassName
          ? `pe-input-container form-floating mb-3 ${inputClassName}`
          : "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 && values != undefined ? (
            values.map((item, i) => (
              <option
                id="ddlProducts"
                className={`select-option`}
                key={`item${i}`}
              >
                {isFlorida ? `${item.circuit} Judicial Circuit` : 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;