import React from 'react';
import { Typography } from '@mui/material';

interface GlobalMenuModuleNameProps {
  open?: boolean;
  module: string;
}

const getModuleName = (module: string) => {
  const moduleSplit = module.split('-');
  return moduleSplit[1];
};

const GlobalMenuModuleName = (
  props: GlobalMenuModuleNameProps
): React.ReactElement => {
  const { open, module } = props;
  return (
    <Typography
      variant="caption"
      display="block"
      color="text.secondary"
      sx={
        open
          ? { textTransform: 'capitalize' }
          : { pb: 1, textTransform: 'capitalize', textAlign: 'center' }
      }
    >
      {getModuleName(module)}
    </Typography>
  );
};

export default React.memo(GlobalMenuModuleName);