import { ExpandLess, ExpandMore, Link } from "@mui/icons-material";
import { Button, Divider, ListItemIcon, ListItemText, Menu, MenuItem } from "@mui/material";
import NextLink from "next/link";
import { useState } from "react";

const HeaderMenu = ({ menu }) => {
    const [anchorEl, setAnchorEl] = useState(null);
    const open = Boolean(anchorEl);

    const handleClick = (event) => {
        setAnchorEl(event.currentTarget);
    };
    const handleClose = () => {
        setAnchorEl(null);
    };

    return (
        <>
            <Button
                color="inherit"
                aria-haspopup="true"
                aria-expanded={open ? 'true' : undefined}
                onClick={handleClick}
                endIcon={open ? <ExpandLess /> : <ExpandMore />}
            >
                {menu.title}
            </Button>
            <Menu
                anchorEl={anchorEl}
                open={open}
                onClose={handleClose}
            >
                {menu.subMenu.map((subMenu, index) => (
                    <>
                        {subMenu.map(sub => (

                            <MenuItem component={NextLink} href={sub.href} key={sub.title} onClick={handleClose}>
                                <ListItemIcon>
                                    <Link fontSize="small" />
                                </ListItemIcon>
                                <ListItemText>{sub.title}</ListItemText>
                            </MenuItem>
                        ))}
                        {menu.subMenu.length - 1 !== index && (
                            <Divider />
                        )}
                    </>
                ))}
            </Menu>
        </>
    );
};
export default HeaderMenu;