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

// project import
import Search from './Search';
import Profile from './Profile';
//import Notification from './Notification';
import MobileSection from './MobileSection';
//import LocaleSelector from "./LocaleSelector";

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

const HeaderContent = () => {
  const matchesXs = useMediaQuery((theme) => theme.breakpoints.down('md'));

  return (
    <>
      {!matchesXs && <Box sx={{width: '100%', ml: {xs: 0, md: 1}}} />}
      {matchesXs && <Box sx={{ width: '100%', ml: 1 }} />}

      {/*<LocaleSelector/>*/}

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

export default HeaderContent;
