import React from "react";
import PropTypes from "prop-types";
import { Typography, Box } from "@mui/material";

const styles = {
  box: {
    display: "flex",
    justifyContent: "space-between",
    marginBottom: 1,
    marginTop: 0
  },
  title: {
    display: "flex",
    justifyContent: "center",
    flexDirection: "column",
    minHeight: "40px"
  },
  titleText: {
    textTransform: "uppercase"
  }
};

const PageTitle = ({ text, toolBar, navigation }) => {
  return (
    <Box sx={styles.box}>
      {navigation && navigation}
      <Box sx={styles.title}>
        <Typography sx={styles.titleText} variant="h3" size="sm">
          {text}
        </Typography>
      </Box>
      {toolBar && toolBar}
    </Box>
  );
};

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

export default PageTitle;