import { Children } from "react";

import {
    Menu,
    MenuHandler,
    Button,
    MenuList,
    MenuItem,
    Checkbox,
    button,
} from "@material-tailwind/react";

export function MenuWithCheckbox({ children, name }) {

    return (
        <Menu
            dismiss={{
                itemPress: false,
            }}
        >
            <MenuHandler>
                <Button className="bg-transparent text-black  border-2 border-[#AFA0D7]">{name}</Button>
            </MenuHandler>
            <MenuList className="w-52">
                
            {Children.map(children, (child) => (
                            <div key={child.key}>
                                {child}
                            </div>
                        ))}
                
            </MenuList>
        </Menu>
    );
}