import React, { ReactNode } from "react";
import "./Input.scss";
type InputProps = {
  children?: ReactNode;
  inputLabel?: string;
  inputValue?: string;
  inputType?: string;
  inputProps?: object;
};
const Input: React.SFC<InputProps> = ({
  children,
  inputLabel,
  inputValue,
  inputProps
}: InputProps) => {
  return (
    <div className="key46--input">
      <label
        htmlFor={`key46--input--${inputLabel}`}
        className="key46--input-field-label"
      >
        {inputLabel}
      </label>
      <input
        type="text"
        className="key46--input-text-field w-input"
        maxLength={256}
        name={`key46--input--${inputLabel}`}
        data-name={`Key46 Input ${inputLabel}`}
        id={`key46--input--${inputLabel}`}
        value={inputValue}
        {...inputProps}
      />
      <label
        htmlFor={`key46--input--${inputLabel}`}
        className="key46--input-field-label"
      >
        {children}
      </label>
    </div>
  );
};
Input.defaultProps = {
  children: "",
  inputLabel: "",
  inputValue: "",
  inputType: "text",
  inputProps: {
    onChange: (event: any) => {
      console.log("You have change me!", event.target);
    }
  }
};
export default Input;