import * as React from 'react';
import classNames from 'classnames';

import CloseButton from '../close-button';
import MenuContext from './MenuContext';

import './MenuHeader.scss';

type Props = {
    children: React.Node,
    className?: string,
}

const MenuHeader = ({ children, className = '', ...rest }: Props) => {
    const { closeMenu } = React.useContext(MenuContext);

    return (
        <div
            className={classNames('bdl-MenuHeader', className)}
            data-testid="bdl-MenuHeader"
            role="presentation"
            {...rest}
        >
            <div className="bdl-MenuHeader-content">{children}</div>
            <CloseButton onClick={closeMenu} />
        </div>
    );
};

export default MenuHeader;