import { jsx as _jsx } from "react/jsx-runtime";
import { IconButton } from '../button';
import { useStyleConfig, vui } from '../core';
import Icon from '../icon';
import { cs, mergeRefs } from '../utils';
import { useHeaderContext } from './context';
/** Button that toggles display of the mobile content. */
export const HeaderMobileToggle = vui((props, ref) => {
    const { className, ...rest } = props;
    const { isMobileOpen, mobileToggleRef, setIsMobileOpen } = useHeaderContext() ?? {};
    const styles = useStyleConfig('Header', useHeaderContext());
    const iconName = isMobileOpen ? 'falTimes' : 'falBars';
    return (_jsx(IconButton, { className: cs('vui-headerMobileToggle', className), icon: _jsx(Icon, { name: iconName }), ml: 1, onClick: () => setIsMobileOpen(s => !s), p: "3px", ref: mergeRefs(ref, mobileToggleRef), title: "More options", ...styles.mobileToggle, ...rest }));
});
HeaderMobileToggle.displayName = 'HeaderMobileToggle';
export default HeaderMobileToggle;
//# sourceMappingURL=headerMobileToggle.js.map