// import { useMemo } from 'react';

// material-ui
import { Box, Typography, useMediaQuery } from '@mui/material';

// project import
// import Search from './Search';
import Message from './Message';
import Profile from './Profile';
import Notification from './Notification';
import MobileSection from './MobileSection';
import { getLoginUser } from 'supportFuctions/getLoginUser';
// import MegaMenuSection from './MegaMenuSection';

// ==============================|| HEADER - CONTENT ||============================== //

const HeaderContent = () => {
  const matchesXs = useMediaQuery((theme) => theme.breakpoints.down('md'));
  const user = getLoginUser();
  console.log('user', user);

  // eslint-disable-next-line react-hooks/exhaustive-deps
  // const megaMenu = useMemo(() => <MegaMenuSection />, []);

  return (
    <>
      <Typography variant="h5" sx={{ color: 'white', whiteSpace: 'nowrap' }}>
        {user?.roleid == 3 ? 'Admin' : 'Manager'}
      </Typography>
      {/* {!matchesXs && <Search />} */}
      {/* {!matchesXs && megaMenu} */}
      {/* {matchesXs && <Box sx={{ width: '100%', ml: 1 }} />} */}
      <Box sx={{ width: '100%', ml: 1 }} />

      <Notification />
      <Message />
      {!matchesXs && <Profile />}
      {matchesXs && <MobileSection />}
    </>
  );
};

export default HeaderContent;
