// import { useState } from 'react';

// material-ui
import {
  Grid,
  Typography,
  Stack
} from '@mui/material';
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
// ==============================|| DASHBOARD - DEFAULT ||============================== //

const DashboardDefault = () => {
  const userData = JSON.parse(localStorage.getItem("userData"));
  const BackgroundHead = {
    backgroundImage: `url(${titleBackgroundImg})`,
    width: '100%',
    height: '100%',
    backgroundSize:'contain',
    backgroundRepeat: 'no-repeat',
    backgroundColor: '#0C489E',
    backgroundPosition: 'right'
  }
  return (
    <Grid container sx={{minHeight: '90vh', backgroundColor: "backgroundColor.default"}} direction="column">
      <Grid item xs={12}>
        <div style={BackgroundHead}>
          <Stack direction="row"  height='70px' justifyContent="flex-start" alignItems="center">
            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
              Morning, {userData.fullenName}
            </Typography>
          </Stack>
        </div>
      </Grid>
    </Grid>
  );
};

export default DashboardDefault;
