import { useAuth } from '../context/AuthContext';
import { AppBar, Toolbar, Typography, IconButton, Box, Avatar, useMediaQuery } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import { OPEN_WIDTH, MINI_WIDTH } from './MenuDrawerPrivate';


export default function AppHeader({ drawerExpanded = true, currentPage = 'Dashboard' }) {
  const theme = useTheme();
  const isMobile = useMediaQuery('(max-width:900px)');
  const { user } = useAuth();


  const leftOffset = isMobile ? 0 : (drawerExpanded ? OPEN_WIDTH : MINI_WIDTH);

  return (
    <AppBar
      position="fixed"
      sx={{
        background: 'white',
        color: '#40120E',
        boxShadow: '0px 2px 4px rgba(0,0,0,0.1)',
      }}
    >
      <Toolbar sx={{ minHeight: 64 }}>
        <Box
          sx={{
            ml: `${leftOffset}px`,
            transition: theme.transitions.create('margin-left', {
              duration: theme.transitions.duration.standard,
              easing: theme.transitions.easing.sharp,
            }),
            display: 'flex',
            alignItems: 'center',
            flexGrow: 1,
          }}
        >
          <Typography variant="h6" sx={{ fontWeight: 600 }}>
            {currentPage}
          </Typography>
        </Box>

                <Box
          sx={{
            position: 'absolute',
            right: 20,
            top: '50%',
            transform: 'translateY(-50%)',
            display: 'flex',
            alignItems: 'center',
            gap: '10px',

          }}
        >
          <IconButton>
            <img src="/refresh.png" alt="Reload" width={24} height={24} />
          </IconButton>
          <IconButton>
            <img src="/alert.png" alt="Notifications" width={24} height={24} />
          </IconButton>

          {user && (
            <Box display="flex" alignItems="center" gap={1}>
              <Avatar alt={user.name} src={user.picture} />
              <Typography variant="body1" color="#40120EFF">
                {user.name}
              </Typography>
            </Box>
          )}
        </Box>

      </Toolbar>
    </AppBar>
  );
}