import React from "react";
import { Grid } from "..";
import style from "./style";

/**
 * Tabs make it easy to explore and switch between different views of an app or
 * categorized data sets.
 * @param {object} props The props
 * @returns {function} The component
 */
const Tabs = props => {
  const backgroundStyle = style.generateBackgroundColors(props);
  const className = props.transparent ? "transparent" : "colored-tab";
  return (
    <Grid
      role="group"
      {...props}
      wrap={props.vertical}
      className={className}
      style={{ ...style.tabs, ...backgroundStyle, ...props.style }}
      justify={props.vertical ? "space-evenly" : "center"}
    >
      {React.Children.map(props.children, child =>
        React.cloneElement(child, { vertical: props.vertical })
      )}
    </Grid>
  );
};

Tabs.defaultProps = {
  vertical: false
};

export default Tabs;