import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
import { DotsHorizontalIcon, ChevronDownIcon } from '../../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
import { cx, cva } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
import { forwardRef, useMemo, cloneElement } from 'react';
import { DropdownMenu } from '../dropdown-menu/dropdown-menu.js';
import styles from './breadcrumb.module.css.js';

const BreadcrumbItem = ({ as = jsxRuntimeExports.jsx("a", {}), onItemClick, ...props }) => {
    const { label, href, icon, dropdownItems, isActive } = props;
    if (label === 'ellipsis') {
        return (jsxRuntimeExports.jsx("span", { className: styles['breadcrumb-ellipsis'], children: jsxRuntimeExports.jsx(DotsHorizontalIcon, {}) }));
    }
    if (dropdownItems) {
        return (jsxRuntimeExports.jsxs(DropdownMenu, { children: [jsxRuntimeExports.jsxs(DropdownMenu.Trigger, { className: styles['breadcrumb-dropdown-trigger'], children: [icon && jsxRuntimeExports.jsx("span", { className: styles['breadcrumb-icon'], children: icon }), jsxRuntimeExports.jsx("span", { children: label }), jsxRuntimeExports.jsx(ChevronDownIcon, { className: styles['breadcrumb-dropdown-icon'] })] }), jsxRuntimeExports.jsx(DropdownMenu.Content, { className: styles['breadcrumb-dropdown-content'], children: dropdownItems.map((dropdownItem, dropdownIndex) => (jsxRuntimeExports.jsx(DropdownMenu.Item, { className: styles['breadcrumb-dropdown-item'], onSelect: () => onItemClick?.(dropdownItem), children: dropdownItem.label }, dropdownIndex))) })] }));
    }
    return cloneElement(as, {
        className: cx(styles['breadcrumb-link'], isActive && styles['breadcrumb-link-active']),
        onClick: (e) => {
            if (onItemClick && href !== '#') {
                e.preventDefault();
                onItemClick(props);
            }
        },
        href,
        ...as.props
    }, jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [icon && jsxRuntimeExports.jsx("span", { className: styles['breadcrumb-icon'], children: icon }), jsxRuntimeExports.jsx("span", { children: label })] }));
};
const breadcrumbVariants = cva(styles['breadcrumb'], {
    variants: {
        size: {
            small: styles['breadcrumb-small'],
            medium: styles['breadcrumb-medium']
        }
    },
    defaultVariants: {
        size: 'medium'
    }
});
const Breadcrumb = forwardRef(({ className, size = 'medium', items, maxVisibleItems, separator = '/', onItemClick, ...props }, ref) => {
    const visibleItems = useMemo(() => {
        if (maxVisibleItems && items.length > maxVisibleItems) {
            return [
                ...items.slice(0, 1),
                { label: 'ellipsis', href: '#' },
                ...items.slice(-Math.min(maxVisibleItems - 1, items.length - 1))
            ];
        }
        return items;
    }, [maxVisibleItems, items]);
    return (jsxRuntimeExports.jsx("nav", { className: breadcrumbVariants({ size, className }), ref: ref, ...props, children: jsxRuntimeExports.jsx("ol", { className: styles['breadcrumb-list'], children: visibleItems.map((item, index) => {
                const isLast = index === visibleItems.length - 1;
                return (jsxRuntimeExports.jsxs("li", { className: styles['breadcrumb-item'], children: [jsxRuntimeExports.jsx(BreadcrumbItem, { ...item, isActive: isLast, onItemClick: onItemClick }), !isLast && (jsxRuntimeExports.jsx("span", { className: styles['breadcrumb-separator'], children: separator }))] }, index));
            }) }) }));
});
Breadcrumb.displayName = 'Breadcrumb';

export { Breadcrumb };
//# sourceMappingURL=breadcrumb.js.map
