import { jsx as _jsx } from "react/jsx-runtime";
import { useStyleConfig, vui } from '../core';
import List from '../list';
import { cs } from '../utils';
import { useHeaderContext } from './context';
import HeaderLinkItem from './headerLinkItem';
/** List of Header Links. */
export const HeaderMainLinks = vui((props, ref) => {
    const { children, className, links, ...rest } = props;
    const { isMobile } = useHeaderContext() ?? {};
    const styles = useStyleConfig('Header', useHeaderContext());
    const screenStyles = isMobile
        ? {
            flexDirection: 'column',
            mb: 1,
        }
        : { h: '100%' };
    return (_jsx(List, { className: cs('vui-headerMainLinks', className), display: "flex", ref: ref, ...styles.mainLinks, ...screenStyles, ...rest, children: children ?? links?.map((link, index) => _jsx(HeaderLinkItem, { ...link }, index)) }));
});
HeaderMainLinks.displayName = 'HeaderMainLinks';
export default HeaderMainLinks;
//# sourceMappingURL=headerMainLinks.js.map