'use client';
import React from 'react';
import PHXLink from '../Link/link';
import { classNames } from '../types';
export function PHXBreadcrumb({ items, className, separator = React.createElement("span", { className: 'mx-2 text-gray-400' }, "/"), }) {
    return (React.createElement("nav", { "aria-label": 'Breadcrumb', className: classNames('min-w-0', className) },
        React.createElement("ol", { className: 'flex min-w-0 flex-wrap items-center text-xs leading-6 text-gray-600 sm:leading-7' }, items.map((item, index) => {
            var _a;
            const isCurrent = (_a = item.current) !== null && _a !== void 0 ? _a : index === items.length - 1;
            const isInteractive = !isCurrent && (item.href || item.onClick);
            let content;
            if (isInteractive && item.href) {
                content = (React.createElement(PHXLink, { className: 'cursor-pointer transition hover:text-gray-700 hover:underline', href: item.href }, item.label));
            }
            else if (isInteractive && item.onClick) {
                content = (React.createElement("button", { className: 'cursor-pointer transition hover:text-gray-700 hover:underline', onClick: item.onClick, type: 'button' }, item.label));
            }
            else {
                content = React.createElement("span", { className: classNames(isCurrent ? 'text-gray-600' : 'text-gray-600') }, item.label);
            }
            return (React.createElement("li", { key: index, className: 'flex min-w-0 items-center' },
                React.createElement("span", { className: 'max-w-48 truncate' }, content),
                index < items.length - 1 && separator));
        }))));
}
//# sourceMappingURL=Breadcrumb.js.map