import React from "react";
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"
  }
};

type PageTitleProps = {
  text: string;
  toolBar?: React.ReactNode;
  navigation?: React.ReactNode;
};

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

export default PageTitle;
