import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback, useContext } from 'react';
import Icon, { registerIcon } from '../Icon';
import * as caretLeftIcon from '../Icon/icons/caret-left.icon';
import * as caretRightIcon from '../Icon/icons/caret-right.icon';
import { useI18n, useDirection } from '../../hooks';
import Flex from '../Flex';
import SummaryItem from '../SummaryItem';
import { cap } from '../../utils';
import MenuContext from './Menu.context';
import { StyledMenuListHeader } from './Menu.styles';
registerIcon(caretLeftIcon, caretRightIcon);
const MenuListHeader = ({ text, onClick }) => {
    const t = useI18n();
    const { arrowNavigationUnsupported } = useContext(MenuContext);
    const { start } = useDirection();
    const onKeyDown = useCallback((ev) => {
        if (ev.key === 'Enter' || ev.key === `Arrow${cap(start)}`) {
            onClick();
        }
    }, [onClick, start]);
    return (_jsx(Flex, { container: { alignItems: 'center' }, as: StyledMenuListHeader, onClick: onClick, onKeyDown: onKeyDown, "data-collapse": 'true', "aria-expanded": true, "aria-label": `${t('menu_expanded', [text || ''])} ${arrowNavigationUnsupported
            ? t('menu_item_collapse_shift_space')
            : t('menu_item_collapse_arrow')}`, children: _jsx(SummaryItem, { visual: _jsx(Icon, { name: `caret-${start}` }), primary: text }) }));
};
export default MenuListHeader;
//# sourceMappingURL=MenuListHeader.js.map