src/components/Layout/Header.jsx

import React from 'react';
import { 
  AppBar, 
  Toolbar, 
  Typography, 
  Button, 
  IconButton, 
  Box,
  useScrollTrigger,
  Slide
} from '@mui/material';
import MenuIcon from '@mui/icons-material/Menu';
import { useAuth } from '../../hooks/useAuth';
import { Link } from 'react-router-dom';
import ThemeToggle from '../UI/ThemeToggle';

function HideOnScroll({ children }) {
  const trigger = useScrollTrigger();
  return (
    <Slide appear={false} direction="down" in={!trigger}>
      {children}
    </Slide>
  );
}

const Header = () => {
  const { isAuthenticated, logout } = useAuth();

  return (
    <HideOnScroll>
      <AppBar position="sticky" elevation={1}>
        <Toolbar>
          <IconButton
            edge="start"
            color="inherit"
            aria-label="menu"
            sx={{ mr: 2 }}
          >
            <MenuIcon />
          </IconButton>
          
          <Typography 
            variant="h6" 
            component={Link} 
            to="/"
            sx={{ 
              flexGrow: 1,
              textDecoration: 'none',
              color: 'inherit',
              fontWeight: 'bold'
            }}
          >
            EnlightenQalb
          </Typography>
  
          <Box sx={{ display: { xs: 'none', sm: 'block' } }}>
            <Button 
              color="inherit" 
              component={Link} 
              to="/about"
              sx={{ mx: 1 }}
            >
              About
            </Button>
            {isAuthenticated ? (
              <>
                <Button 
                  color="inherit" 
                  component={Link} 
                  to="/dashboard"
                  sx={{ mx: 1 }}
                >
                  Dashboard
                </Button>
                <Button 
                  color="inherit" 
                  onClick={logout}
                  sx={{ mx: 1 }}
                >
                  Logout
                </Button>
              </>
            ) : (
              <Button 
                color="inherit" 
                component={Link} 
                to="/login"
                sx={{ mx: 1 }}
              >
                Login
              </Button>
            )}
          </Box>
  
          <Box sx={{ display: 'flex', alignItems: 'center', ml: 2 }}>
            <ThemeToggle />
          </Box>
        </Toolbar>
      </AppBar>
    </HideOnScroll>
  );
};

export default Header;