import React, { useState } from "react";
import { 
  AppBar, Toolbar, Typography, Button, IconButton, Box, Drawer, List, 
  ListItem, ListItemButton, ListItemText 
} from "@mui/material";
import MenuIcon from "@mui/icons-material/Menu";
import headerlogo from "../components/imageandgif/newlogo.png"

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

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

  return (
    <AppBar 
      position="fixed" 
      sx={{ 
        backgroundColor: "#7c77770d", 
        margin: "20px 20px 10px 20px",
       
        boxShadow: "none",
        width: {
          xs: "91.6vw",
          sm: "95.5vw",
          md: "96.5vw",
          lg: "96.8vw",
          xl: "96.4vw"
        },
        color: "black",
        zIndex:11111
      }}
    >
      <Toolbar sx={{ display: "flex", justifyContent: "space-between" }}>
        {/* Logo in Desktop, Centered in Mobile */}
        <Box sx={{ display: "flex", alignItems: "center", flexGrow: { xs: 1, md: 0 } }}>
          <img 
            src={headerlogo}
            alt="Logo" 
            style={{ height: "50px", cursor: "pointer", width:'176px' }} 
          />
        </Box>

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

        {/* Desktop Navigation */}
        <Box sx={{ display: { xs: "none", md: "flex" }, gap: 3 }}>
          <Button color="inherit">Home</Button>
          <Button color="inherit">About</Button>
          <Button color="inherit">Team</Button>
          <Button 
            sx={{ 
              padding: "7px 20px",
              backgroundColor: "#0841adcc", 
              color: "white", 
              "&:hover": { backgroundColor: "darkblue" } 
            }} 
          >
            Contact-Us
          </Button>
        </Box>

        {/* Mobile Drawer Menu */}
        <Drawer anchor="right" open={mobileOpen} onClose={toggleMobileMenu} sx={{zIndex:111111}}>
          <Box sx={{ width: 250 }} role="presentation" onClick={toggleMobileMenu} onKeyDown={toggleMobileMenu}>
            <List>
              <ListItem disablePadding>
                <ListItemButton>
                  <ListItemText primary="Home" />
                </ListItemButton>
              </ListItem>
              <ListItem disablePadding>
                <ListItemButton>
                  <ListItemText primary="What we do" />
                </ListItemButton>
              </ListItem>
              <ListItem disablePadding>
                <ListItemButton>
                  <ListItemText primary="Our philosphy" />
                </ListItemButton>
              </ListItem>
              <ListItem disablePadding>
                <ListItemButton>
                  <ListItemText primary="Our team" />
                </ListItemButton>
              </ListItem>
              <ListItem >
                <ListItemButton sx={{ backgroundColor: "blue", color: "white", "&:hover": { backgroundColor: "darkblue" } }}>
                  <ListItemText primary="Contact Us" />
                </ListItemButton>
              </ListItem>
            </List>
          </Box>
        </Drawer>
      </Toolbar>
    </AppBar>
  );
};

export default Header;