import React, { useState } from "react";
import {
  AppBar,
  Toolbar,
  Typography,
  IconButton,
  Drawer,
  List,
  ListItem,
  ListItemText,
  Button,
  useMediaQuery,
  useTheme,
  Box,
  Container,
  ListItemButton,
} from "@mui/material";
import MenuIcon from "@mui/icons-material/Menu";
import { motion } from "framer-motion";

const navItems = ["Home", "Services", "Portfolio", "About Us", "Blog"];

const Header = () => {
  const [mobileOpen, setMobileOpen] = useState(false);
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("md"));

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

  const drawer = (
    <Box sx={{ width: 250, backgroundColor: "#000" }} onClick={toggleDrawer}>
      <List>
        {navItems.map((item) => (
          <ListItemButton component="a" href="#" key={item}>
            <ListItemText primary={item} sx={{ color: "#fff" }} />
          </ListItemButton>
        ))}
        <ListItem disablePadding>
          <Button
            variant="outlined"
            fullWidth
            sx={{
              borderColor: "#00E0FF",
              color: "#00E0FF",
              backgroundColor: "transparent",
              borderRadius: "8px",
              m: 2,
              "&:hover": {
                backgroundColor: "#00E0FF",
                color: "#000",
              },
            }}
          >
            Contact Us
          </Button>
        </ListItem>
      </List>
    </Box>
  );

  return (
    <AppBar
      position="sticky"
      sx={{ backgroundColor: "#000", boxShadow: "none" }}
    >
      <Container maxWidth="lg">
        <Toolbar sx={{ justifyContent: "space-between", padding: "16px 0" }}>
          <motion.div
            initial={{ opacity: 0, y: -10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
          >
            <Typography variant="h6" sx={{ fontWeight: 700, color: "#fff" }}>
              QUADRA EDGE
            </Typography>
          </motion.div>

          {isMobile ? (
            <>
              <IconButton color="inherit" edge="end" onClick={toggleDrawer}>
                <MenuIcon sx={{ color: "#fff" }} />
              </IconButton>
              <Drawer
                anchor="right"
                open={mobileOpen}
                onClose={toggleDrawer}
                sx={{ "& .MuiDrawer-paper": { backgroundColor: "#000" } }}
              >
                {drawer}
              </Drawer>
            </>
          ) : (
            <Box sx={{ display: "flex", gap: 4, alignItems: "center" }}>
              {navItems.map((item, index) => (
                <motion.div
                  key={item}
                  initial={{ opacity: 0, y: -5 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.1 * index }}
                >
                  <Typography
                    variant="body1"
                    component="a"
                    href="#"
                    sx={{
                      color: "#fff",
                      textDecoration: "none",
                      "&:hover": {
                        color: "#00E0FF",
                      },
                    }}
                  >
                    {item}
                  </Typography>
                </motion.div>
              ))}
              <motion.div
                initial={{ opacity: 0, y: -5 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.5 }}
              >
                <Button
                  variant="outlined"
                  sx={{
                    borderColor: "#00E0FF",
                    color: "#00E0FF",
                    backgroundColor: "transparent",
                    borderRadius: "8px",
                    textTransform: "none",
                    padding: "8px 24px",
                    "&:hover": {
                      backgroundColor: "#00E0FF",
                      color: "#000",
                      borderColor: "#00E0FF",
                    },
                  }}
                >
                  Contact Us
                </Button>
              </motion.div>
            </Box>
          )}
        </Toolbar>
      </Container>
    </AppBar>
  );
};

export default Header;