import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from "react";
import { ChevronRight, MoreHorizontal } from "lucide-react";
import { cn } from "../libs/utils";
export function Breadcrumbs({ path, maxItems = 3, className, separator }) {
    const items = path || [];
    const renderBreadcrumbItem = (item) => {
        if (item.onClick) {
            return _jsx(BreadcrumbButton, { onClick: item.onClick, href: item.href, children: item.label });
        }
        else if (item.href) {
            return _jsx(BreadcrumbButton, { href: item.href, children: item.label });
        }
        else {
            return _jsx(BreadcrumbPage, { children: item.label });
        }
    };
    if (items.length <= maxItems) {
        return (_jsx(Breadcrumb, { className: cn("w-full", className), children: _jsx(BreadcrumbList, { children: items.map((item, index) => (_jsxs(React.Fragment, { children: [_jsx(BreadcrumbItem, { children: renderBreadcrumbItem(item) }), index < items.length - 1 &&
                            _jsx(BreadcrumbSeparator, { children: separator ?? _jsx(ChevronRight, {}) })] }, index))) }) }));
    }
    const lastThreeItems = items.slice(-(maxItems - 1));
    return (_jsx(Breadcrumb, { className: cn("w-full", className), children: _jsxs(BreadcrumbList, { children: [_jsx(BreadcrumbItem, { children: _jsx(BreadcrumbEllipsis, {}) }), _jsx(BreadcrumbSeparator, { children: separator ?? _jsx(ChevronRight, {}) }), lastThreeItems.map((item, index) => (_jsxs(React.Fragment, { children: [_jsx(BreadcrumbItem, { children: renderBreadcrumbItem(item) }), index < lastThreeItems.length - 1 && _jsx(BreadcrumbSeparator, { children: separator ?? _jsx(ChevronRight, {}) })] }, index)))] }) }));
}
const Breadcrumb = React.forwardRef(({ ...props }, ref) => _jsx("nav", { ref: ref, "aria-label": "breadcrumb", ...props }));
Breadcrumb.displayName = "Breadcrumb";
const BreadcrumbList = React.forwardRef(({ className, ...props }, ref) => (_jsx("ol", { ref: ref, className: cn("flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5", className), ...props })));
BreadcrumbList.displayName = "BreadcrumbList";
const BreadcrumbItem = React.forwardRef(({ className, ...props }, ref) => (_jsx("li", { ref: ref, className: cn("inline-flex items-center gap-1.5 text-muted", className), ...props })));
BreadcrumbItem.displayName = "BreadcrumbItem";
const BreadcrumbLink = React.forwardRef(({ asChild, className, ...props }, ref) => {
    return (_jsx("a", { ref: ref, className: cn("transition-colors hover:text-muted", className), ...props }));
});
BreadcrumbLink.displayName = "BreadcrumbLink";
const BreadcrumbButton = React.forwardRef(({ className, href, onClick, ...props }, ref) => {
    const handleClick = (e) => {
        e.preventDefault();
        if (onClick) {
            onClick(e);
        }
    };
    return (_jsx("button", { ref: ref, className: cn("transition-colors hover:text-foreground cursor-pointer", className), onClick: handleClick, ...props }));
});
BreadcrumbButton.displayName = "BreadcrumbButton";
const BreadcrumbPage = React.forwardRef(({ className, ...props }, ref) => (_jsx("span", { ref: ref, role: "link", "aria-disabled": "true", "aria-current": "page", className: cn("font-normal text-foreground", className), ...props })));
BreadcrumbPage.displayName = "BreadcrumbPage";
const BreadcrumbSeparator = ({ children, className, ...props }) => (_jsx("li", { role: "presentation", "aria-hidden": "true", className: cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className), ...props, children: children ?? _jsx(ChevronRight, {}) }));
BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
const BreadcrumbEllipsis = ({ className, ...props }) => (_jsxs("span", { role: "presentation", "aria-hidden": "true", className: cn("flex h-9 w-9 items-center justify-center", className), ...props, children: [_jsx(MoreHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "More" })] }));
BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
//# sourceMappingURL=breadcrumb.js.map