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 { cva } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
import { forwardRef } from 'react';
import { DropdownMenu } from '../dropdown-menu/dropdown-menu.js';
import styles from './breadcrumb.module.css.js';

const breadcrumb = 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 = maxVisibleItems && items.length > maxVisibleItems
        ? [
            ...items.slice(0, 1),
            { label: 'ellipsis', href: '#' },
            ...items.slice(-Math.min(maxVisibleItems - 1, items.length - 1))
        ]
        : items;
    const renderItem = (item, index, isLast) => (jsxRuntimeExports.jsxs("li", { className: styles['breadcrumb-item'], children: [item.label === 'ellipsis' ? (jsxRuntimeExports.jsx("span", { className: styles['breadcrumb-ellipsis'], children: jsxRuntimeExports.jsx(DotsHorizontalIcon, {}) })) : item?.dropdownItems ? (jsxRuntimeExports.jsxs(DropdownMenu, { children: [jsxRuntimeExports.jsxs(DropdownMenu.Trigger, { className: styles['breadcrumb-dropdown-trigger'], children: [item.icon && jsxRuntimeExports.jsx("span", { className: styles['breadcrumb-icon'], children: item.icon }), jsxRuntimeExports.jsx("span", { children: item.label }), jsxRuntimeExports.jsx(ChevronDownIcon, { className: styles['breadcrumb-dropdown-icon'] })] }), jsxRuntimeExports.jsx(DropdownMenu.Content, { className: styles['breadcrumb-dropdown-content'], children: item.dropdownItems.map((dropdownItem, dropdownIndex) => (jsxRuntimeExports.jsx(DropdownMenu.Item, { className: styles['breadcrumb-dropdown-item'], onSelect: () => onItemClick && onItemClick({
                                label: dropdownItem.label,
                                href: dropdownItem.href
                            }), children: dropdownItem.label }, dropdownIndex))) })] })) : (jsxRuntimeExports.jsxs("a", { href: item.href, className: `${styles['breadcrumb-link']} ${isLast ? styles['breadcrumb-link-active'] : ''}`, onClick: (e) => {
                    if (onItemClick && item.href !== '#') {
                        e.preventDefault();
                        onItemClick(item);
                    }
                }, children: [item.icon && jsxRuntimeExports.jsx("span", { className: styles['breadcrumb-icon'], children: item.icon }), jsxRuntimeExports.jsx("span", { children: item.label })] })), !isLast && jsxRuntimeExports.jsx("span", { className: styles['breadcrumb-separator'], children: separator })] }, index));
    return (jsxRuntimeExports.jsx("nav", { className: breadcrumb({ size: size, className }), ref: ref, ...props, children: jsxRuntimeExports.jsx("ol", { className: styles['breadcrumb-list'], children: visibleItems.map((item, index) => renderItem(item, index, index === visibleItems.length - 1)) }) }));
});
Breadcrumb.displayName = "Breadcrumb";

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