"use client";
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import { cx } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
import { forwardRef, useContext, cloneElement } from 'react';
import { Avatar } from '../avatar/avatar.js';
import { Flex } from '../flex/flex.js';
import { Tooltip } from '../tooltip/tooltip.js';
import { SidebarContext } from './sidebar-root.js';
import styles from './sidebar.module.css.js';

const SidebarItem = forwardRef(({ classNames, leadingIcon, children, active, disabled, as = jsx("a", {}), ...props }, ref) => {
    const { isCollapsed, hideCollapsedItemTooltip } = useContext(SidebarContext);
    const shouldShowFallback = leadingIcon == undefined &&
        isCollapsed &&
        typeof children === 'string' &&
        children.length > 0;
    const content = cloneElement(as, {
        ref,
        className: cx(styles['nav-item'], classNames?.root),
        'data-active': active,
        'data-disabled': disabled,
        role: 'menuitem',
        'aria-current': active ? 'page' : undefined,
        'aria-disabled': disabled,
        ...props
    }, jsxs(Fragment, { children: [jsx(Flex, { align: 'center', gap: 3, className: cx(styles['nav-leading-icon'], classNames?.leadingIcon), "aria-hidden": 'true', children: shouldShowFallback ? (jsx(Avatar, { size: 1, variant: 'soft', color: 'neutral', fallback: children[0].toUpperCase(), style: { cursor: 'pointer' } })) : (leadingIcon) }), !isCollapsed && jsx("span", { className: styles['nav-text'], children: children })] }));
    if (isCollapsed && !hideCollapsedItemTooltip) {
        return (jsx(Tooltip, { message: children, side: 'right', children: content }));
    }
    return content;
});
SidebarItem.displayName = 'Sidebar.Item';

export { SidebarItem };
//# sourceMappingURL=sidebar-item.js.map
