import React, { useState } from "react";
import { 
  AppBar, Toolbar, Typography, Button, IconButton, Menu, 
  MenuItem, Box, Drawer, List, ListItem, ListItemButton, 
  ListItemIcon, ListItemText, Divider 
} from "@mui/material";
import MenuIcon from "@mui/icons-material/Menu";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import InfoIcon from "@mui/icons-material/Info";
import PersonIcon from "@mui/icons-material/Person";
import GroupsIcon from "@mui/icons-material/Groups";
import HomeIcon from "@mui/icons-material/Home";
import BuildIcon from "@mui/icons-material/Build";
import ContactMailIcon from "@mui/icons-material/ContactMail";

const Header: React.FC = () => {
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const [mobileOpen, setMobileOpen] = useState<boolean>(false);

  const handleMenuOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
  };

  const toggleMobileMenu = () => {
    setMobileOpen(!mobileOpen);
  };

  return (
    <AppBar 
      position="fixed" 
      sx={{ 
        backgroundColor: "#eee0e0a3", 
        padding: "10px 20px"  ,
        margin: "10px 20px 10px 20px",
        width: {
            xs: "91.6vw",  // Small screens (mobile)
            sm: "95.5vw",  // Tablets
            md: "91.6vw",  // Medium screens (laptops)
            lg: "96.8vw",  // Large screens (desktops)
            xl: "96.4vw"  // Extra-large screens
          },
          color:'black'

    }}>
      <Toolbar>
        {/* Mobile Menu Button */}
        <IconButton 
          edge="start" 
          color="inherit" 
          aria-label="menu" 
          sx={{ display: { xs: "block", md: "none",  } }} 
          onClick={toggleMobileMenu}
        >
          <MenuIcon />
        </IconButton>

        {/* Logo or Title */}
        <Typography variant="h6" sx={{ flexGrow: 1, textAlign: { xs: "center", md: "left" } }}>
          My Website
        </Typography>

        {/* Desktop Navigation */}
        <Box sx={{ display: { xs: "none", md: "flex" }, gap: 2 }}>
          <Button color="inherit">Home</Button>

          {/* Dropdown Menu */}
          <Button color="inherit" endIcon={<ExpandMoreIcon />} onClick={handleMenuOpen}>
            About
          </Button>

          <Button color="inherit">Services</Button>
          <Button color="inherit">Contact</Button>
        </Box>

        {/* About Dropdown Menu */}
        <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleMenuClose}>
          <MenuItem onClick={handleMenuClose}>
            <InfoIcon sx={{ mr: 1 }} /> About Us
          </MenuItem>
          <MenuItem onClick={handleMenuClose}>
            <PersonIcon sx={{ mr: 1 }} /> About CEO
          </MenuItem>
          <MenuItem onClick={handleMenuClose}>
            <GroupsIcon sx={{ mr: 1 }} /> Team
          </MenuItem>
        </Menu>

        {/* Mobile Drawer Menu */}
        <Drawer anchor="left" open={mobileOpen} onClose={toggleMobileMenu}>
          <Box sx={{ width: 250 }} role="presentation" onClick={toggleMobileMenu} onKeyDown={toggleMobileMenu}>
            <List>
              <ListItem disablePadding>
                <ListItemButton>
                  <ListItemIcon><HomeIcon /></ListItemIcon>
                  <ListItemText primary="Home" />
                </ListItemButton>
              </ListItem>
              
              <ListItem disablePadding>
                <ListItemButton>
                  <ListItemIcon><BuildIcon /></ListItemIcon>
                  <ListItemText primary="Services" />
                </ListItemButton>
              </ListItem>
              <ListItem disablePadding>
                <ListItemButton>
                  <ListItemIcon><ContactMailIcon /></ListItemIcon>
                  <ListItemText primary="Contact" />
                </ListItemButton>
              </ListItem>
            </List>
            <Divider />
            <List>
              <ListItem disablePadding>
                <ListItemButton>
                  <ListItemIcon><PersonIcon /></ListItemIcon>
                  <ListItemText primary="About CEO" />
                </ListItemButton>
              </ListItem>
              <ListItem disablePadding>
                <ListItemButton>
                  <ListItemIcon><GroupsIcon /></ListItemIcon>
                  <ListItemText primary="Team" />
                </ListItemButton>
              </ListItem>
            </List>
          </Box>
        </Drawer>
      </Toolbar>
    </AppBar>
  );
};

export default Header;
