import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import { MenuItem, Menu as MuiMenu, MenuProps as MuiMenuProps } from '@mui/material';
import React from 'react';
import { Button } from '../Button/Button';



export interface MenuProps extends MuiMenuProps {
    label: string;
    items: string[];
}

export const Menu = ({ items, label, ...rest }: MenuProps) => {

    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
    const open = Boolean(anchorEl);

    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
        setAnchorEl(event.currentTarget);
    };
    const handleClose = () => {
        setAnchorEl(null);
    };

    return (
        <div>
            <Button label='Dashboard'
                id="basic-button"
                aria-controls={open ? 'basic-menu' : undefined}
                aria-haspopup="true"
                aria-expanded={open ? 'true' : undefined}
                onClick={handleClick}
                endIcon={<KeyboardArrowDownIcon />}
            >
            </Button>
            <MuiMenu {...rest}
                id="basic-menu"
                anchorEl={anchorEl}
                open={open}
                onClose={handleClose}
                MenuListProps={{
                    'aria-labelledby': 'basic-button',
                }}
            >
                {items.map((item) => (
                    <MenuItem key={item} onClick={handleClose}>{item}</MenuItem>
                ))}
            </MuiMenu>
        </div>
    );


}