import { createElement as _createElement } from "react";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useContext } from 'react';
import Flex from '../Flex';
import MenuContext from './Menu.context';
import { StyledMenuGroupHeader } from './Menu.styles';
import MenuItem from './MenuItem';
const MenuGroup = ({ id, label, items, itemRole }) => {
    const { componentId } = useContext(MenuContext);
    const groupId = `${componentId}-${id}`;
    return (_jsxs("li", { role: 'presentation', children: [_jsx(Flex, { container: { alignItems: 'center', pad: [0.5, 1] }, as: StyledMenuGroupHeader, id: groupId, children: label }), _jsx("ul", { role: 'group', "aria-labelledby": groupId, children: items.length > 0 &&
                    items.map(item => {
                        return _createElement(MenuItem, { ...item, key: item.id, role: itemRole ?? 'menuitem' });
                    }) })] }));
};
export default MenuGroup;
//# sourceMappingURL=MenuGroup.js.map