import React from "react";
import { Drawer, Box, List, ListItem, ListItemButton, ListItemText } from "@mui/material";
import logoSrc from "../../../../assets/images/amberlogo.png";

const MobileNav = ({ open, onClose, menu = [] }) => {
  return (
    <Drawer
      open={open}
      onClose={onClose}
      onClick={()=>{onClose()}}
      sx={{
        "& .MuiDrawer-paper": {
          backgroundColor: "white",
          color: "white",
          width: "100%",
        },
      }}
    >
      {/* Logo Section */}
      <Box
        sx={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: 80,
        }}
      >
        <a href="/">
          <img
            src={logoSrc}
            alt="Logo"
            style={{
              width: 150,
              height: 25,
            }}
          />
        </a>

      </Box>

      {/* Main Navigation */}
      <Box sx={{ width: 250 }} role="presentation">
        <List>
          {menu.map(({ title, link }) => (
            <ListItem key={title} disablePadding>
              <ListItemButton
                onClick={() => { window.location.href = link }}
                sx={{
                  color: "white",
                  "&:hover": {
                    backgroundColor: "white",
                    color: "black",
                  },
                }}
              >
                <ListItemText sx={{ ml: 2 }} primary={title} />
              </ListItemButton>
            </ListItem>
          ))}
        </List>
      </Box>
    </Drawer>
  );
};

export default MobileNav;
