import React from "react";
import PropTypes from "prop-types";
import styles from "./Tab.module.css";

export default function Tab(props) {
  let {
    style,
    variant,
    size,
    startIcon,
    endIcon,
    leftAction,
    rightAction,
    disabled,
    align
  } = props;
  return (
    <div
      className={
        styles.tabContainer +
        " " +
        styles[size] +
        " " +
        styles[variant] +
        " " +
        styles[align]
      }
    >
      {leftAction ? <div className={styles.leftAction}>Action</div> : null}
      <div
        className={styles.tab + " " + `${disabled ? styles.disabled : null}`}
      >
        Tab 1
      </div>
      <div className={styles.tab + " " + styles.active}>
        {startIcon ? <span className={styles.start_icon}>i</span> : null}Tab 2
        {endIcon ? <span className={styles.end_icon}>i</span> : null}
      </div>
      <div className={styles.tab}>Tab 3</div>
      {rightAction ? <div className={styles.rightAction}>Action</div> : null}
    </div>
  );
}

Tab.defaultProps = {
  label: "Label Text"
};

if (__DOCS__) {
  Tab.docs = {
    componentGroup: "Atom"
  };
}

