import { Drawer, List, ListItem, ListItemText, useMediaQuery } from '@mui/material';

const menuOptions = {
  public: ['Home', 'Explore', 'Contact'],
  restricted: ['Dashboard', 'Projects', 'Support'],
  private: ['Products', 'Clients', 'Categories', 'Users', 'Orders', 'Settings', 'Logout'],
};

export default function MenuDrawer({ zone = 'public', open, onClose, onSelect }) {
  const isMobile = useMediaQuery('(max-width:900px)');
  const items = menuOptions[zone];

  return (
    <Drawer anchor="left" open={open} onClose={onClose} slotProps={{
      paper: {
        sx: {
          backgroundColor: '#40120EFF',
          width: isMobile ? '100vw' : 250,
        },
      },
    }}>
      <List sx={{ width: isMobile ? '100vw' : 250, marginTop: 14 }}>
        {items.map((text, index) => (
          <ListItem key={index} onClick={() => {
            onClose(); // Close drawer
            onSelect?.(text); // Notify parent of selected item
          }}>
            <ListItemText
              primary={text}
              slotProps={{
                primary: {
                  sx: {
                    color: '#DFCCBCFF',
                    fontWeight: 'medium',
                  },
                },
              }}
            />
          </ListItem>
        ))}
      </List>
    </Drawer>
  );
}