import React from "react";
import { ListItem, ListItemButton, ListItemText, List, Divider } from "@mui/material";
import { Link } from "react-router-dom";


const makePath = (string) =>{
    return "/" + string.toLowerCase().trim().replace(/[\s]+/g, "-").replace(/[^\w-]+/g, "");
  }

export default function NavButtonMobile({ label, menuItems = [], path = makePath(label), onClick }) {

    return ( <>
        <ListItem disablePadding>
            <ListItemButton component={Link} to={path} onClick={onClick}>
                <ListItemText primary={label} />
            </ListItemButton>
        </ListItem>
        <List component="div" disablePadding>
            {menuItems.map((item, index) => (
                <ListItemButton sx={{ pl: 4 }} component={Link} to={path + makePath(item)} onClick={onClick}>
                    <ListItemText primary={item} />
                </ListItemButton>
            ))}
        </List>
        <Divider />
        </>
    );
}