import React from "react";
import PropTypes from "prop-types";
import "./Input.scss";

const Input = ({ children, inputLabel, inputValue, preProps, inputType }) => {
  return (
    <div className="key46--input">
      <label
        htmlFor={`key46--input--${inputLabel}`}
        className="key46--input-field-label"
      >
        {inputLabel}
      </label>
      <input
        type={inputType}
        className="key46--input-text-field w-input"
        maxLength={256}
        name={`key46--input--${inputLabel}`}
        data-name={`Key46 Input ${inputLabel}`}
        id={`key46--input--${inputLabel}`}
        value={inputValue}
        {...preProps}
      />
      <label
        htmlFor={`key46--input--${inputLabel}`}
        className="key46--input-field-label"
      >
        {children}
      </label>
    </div>
  );
};

Input.propTypes = {
  /** Input label */
  children: PropTypes.node,
  /** Input label */
  inputLabel: PropTypes.string,
  /** Input VALUE */
  inputValue: PropTypes.string,
  /** Input VALUE */
  inputType: PropTypes.string,
  /** Input VALUE */
  preProps: PropTypes.object
};

Input.defaultProps = {
  children: "",
  inputLabel: "",
  inputValue: "",
  inputType: "text",
  preProps: {
    onChange: event => {
      console.log("You have change me!", event.target);
    }
  }
};

export default Input;