import { jsx as _jsx } from "react/jsx-runtime";
import { useStyleConfig, vui } from '../core';
import List from '../list';
import { cs, useCallbackRef } from '../utils';
import { useHeaderContext } from './context';
/** Individual link item of the Header. */
export const HeaderLinkItem = vui((props, ref) => {
    const { className, icon, isActive, linkProps, onClick: onClickProp, url, ...rest } = props;
    const { isMobile, setIsMobileOpen } = useHeaderContext() ?? {};
    const styles = useStyleConfig('Header', useHeaderContext()).linkItem;
    const onClick = useCallbackRef((e) => {
        setIsMobileOpen(false);
        onClickProp?.(e);
    });
    const linkActiveProps = isActive
        ? isMobile
            ? {
                bg: 'skyBlue.95',
                borderColor: 'seaBlue.main',
                borderLeftWidth: 3,
                hoverBg: 'skyBlue.90',
                pl: '10px',
                activeBorderBottomWidth: 0,
                pt: '0px',
            }
            : { borderBottomWidth: 4, pt: '4px' }
        : {};
    const linkMobileProps = isMobile
        ? {
            color: 'darkBlue.main',
            hoverColor: 'darkBlue.main',
            hoverBg: 'skyBlue.90',
            activeColor: 'darkBlue.main',
            activeBg: 'transparent',
            activeBorderColor: 'seaBlue.main',
            activeBorderLeftWidth: 0,
            pt: '0',
            activePl: isActive ? '13px' : '16px',
        }
        : { activeBorderBottomWidth: 0, pt: '0px', activePt: isActive ? '1px' : '0' };
    const itemScreenProps = isMobile ? {} : { display: 'inline-flex', fontWeight: 'medium', h: '100%' };
    return (_jsx(List.Item, { className: cs('vui-headerLinkItem', className), iconLeft: icon, linkProps: {
            href: url,
            ringInset: true,
            transition: 'all 0.1s, border-width 0s, padding 0s',
            w: { xs: '100%', lg: 'max-content' },
            ...styles.link,
            ...linkProps,
            ...linkMobileProps,
            ...linkActiveProps,
        }, onClick: onClick, ref: ref, ...itemScreenProps, ...styles.container, ...rest }));
});
HeaderLinkItem.displayName = 'HeaderLinkItem';
export default HeaderLinkItem;
//# sourceMappingURL=headerLinkItem.js.map