import React from 'react';
import TextBoxBehaviour from "./TextBox.behaviour";
import TextBoxSkeleton from "./TextBox.skeleton";
import textBoxPropTypes, {defaultProps, propsDescription} from "./TextBox.propTypes";
import constantProps from "./TextBox.constantProps";
import componentCategories from "../../docs-utils/componentCategories";
import componentGroups from "../../docs-utils/componentGroups";

export default function TextBox(props){

  return <TextBoxBehaviour
      {...props}
      renderComponent={TextBoxSkeleton}
  />

}

TextBox.propTypes=textBoxPropTypes
TextBox.defaultProps=defaultProps
TextBox.propsDescription=propsDescription
TextBox.constantProps=constantProps

if(__DOCS__){
  TextBox.docs={
    componentGroup: componentGroups.Atom,
    folderName : componentCategories.Typography
  }
};

/*import React from "react";
import PropTypes from "prop-types";
import styles from "./TextBox.module.css";
import componentCategories from "../../docs-utils/componentCategories";
import componentGroups from "../../docs-utils/componentGroups";

export default function Textbox(props) {
  let {
    size,
    style,
    type,
    variant,
    fieldStyle,
    placeholder,
    icon,
    disabled,
    startIcon,
    autoFocus,
    endIcon,
    focusClass
  } = props;
  return (
    <label className={styles.label}>
      {startIcon ? <span className={styles.start_icon}>{startIcon}</span> : null}
      <input
        type={type}
        data-aria-focusstyle={focusClass}
        data-aria-autofocus={autoFocus}
        placeholder={placeholder}
        className={
          styles.textbox +
          " " +
          styles[size] +
          " " +
          styles[fieldStyle] +
          " " +
          styles[variant] +
          " " +
          `${startIcon ? styles.iconSpaceLeft : null}` +
          " " +
          `${endIcon ? styles.iconSpaceRight : null}` +
          " " +
          `${disabled ? styles.disabled : null}`
        }
        disabled={disabled}
      />
      {endIcon ? <span className={styles.end_icon}>{endIcon}</span> : null}
    </label>
  );
}

Textbox.defaultProps = {
  size: "md",
  variant: "",
  type: "text",
  placeholder: "Enter the value",
  fieldStyle: "",
};

if (__DOCS__) {
  Textbox.docs = {
    componentGroup: componentGroups.Atom,
    folderName : componentCategories.Form
  };
}*/