import React from "react";
import Toolbar from "../Toolbar";
import style from "./style";

/**
 * The Header component attaches a customizable header to your page.  You can
 * customize the toolbar buttons and even set up header tabs.
 * @param {object} props The props
 * @returns {function} The component
 */
const Header = props => (
  <div role="group" {...props} {...style}>
    {props.showToolbar ? <Toolbar /> : null}
    {props.showTabs ? () => props.tabs : null}
  </div>
);

Header.defaultProps = {
  showTabs: false,
  showToolbar: true,
  title: ""
};

export default Header;