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: { md: "#f7f7f7", xs: "white" }, 
        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, fontFamily: "Helvetica" }}>
          <Button sx={{ fontFamily: "Helvetica", textTransform: "capitalize" , color:"#2F2E41"}} >Home</Button>
          <Button sx={{ fontFamily: "Helvetica", textTransform: "capitalize" , color:"#2F2E41" }} >About</Button>
          <Button sx={{ fontFamily: "Helvetica", textTransform: "capitalize" ,color:"#2F2E41" }} >Team</Button>
          <Button 
            sx={{ 
              padding: "7px 20px",
              backgroundColor: "#317AF6", 
              color: "white", 
              fontFamily: "Helvetica",
              textTransform: "capitalize",
              "&: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>
              {["Home", "What we do", "Our philosophy", "Our team"].map((text) => (
                <ListItem key={text} disablePadding>
                  <ListItemButton>
                    <ListItemText 
                      primary={text} 
                      sx={{ fontFamily: "Helvetica", textTransform: "capitalize" }} 
                    />
                  </ListItemButton>
                </ListItem>
              ))}
              <ListItem>
                <ListItemButton 
                  sx={{ 
                    backgroundColor: "blue", 
                    color: "white", 
                    fontFamily: "Helvetica",
                    textTransform: "capitalize",
                    "&:hover": { backgroundColor: "darkblue" } 
                  }}
                >
                  <ListItemText primary="Contact us" />
                </ListItemButton>
              </ListItem>
            </List>
          </Box>
        </Drawer>
      </Toolbar>
    </AppBar>
  );
};

export default Header;