import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/core/styles";
import { Typography } from "@material-ui/core";

const useStyles = makeStyles(theme => ({
  box: {
    display: "flex",
    justifyContent: "space-between",
    marginBottom: theme.spacing(1),
    marginTop: theme.spacing(0)
  },
  title: {
    display: "flex",
    justifyContent: "center",
    flexDirection: "column",
    minHeight: "40px"
  },
  titleText: { textTransform: "uppercase" }
}));

const PageTitle = ({ text, toolBar, navigation }) => {
  const classes = useStyles();

  return (
    <div className={classes.box}>
      {navigation && navigation}
      <div className={classes.title}>
        <Typography className={classes.titleText} variant="h3" size="sm">
          {text}
        </Typography>
      </div>
      {toolBar && toolBar}
    </div>
  );
};

PageTitle.propTypes = {
  text: PropTypes.string.isRequired,
  toolBar: PropTypes.node,
  navigation: PropTypes.node
};

export default PageTitle;