"use strict";
'use client';
Object.defineProperty(exports, "__esModule", { value: true });
exports.PHXBreadcrumb = PHXBreadcrumb;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const link_1 = tslib_1.__importDefault(require("../Link/link"));
const types_1 = require("../types");
function PHXBreadcrumb({ items, className, separator = react_1.default.createElement("span", { className: 'mx-2 text-gray-400' }, "/"), }) {
    return (react_1.default.createElement("nav", { "aria-label": 'Breadcrumb', className: (0, types_1.classNames)('min-w-0', className) },
        react_1.default.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_1.default.createElement(link_1.default, { className: 'cursor-pointer transition hover:text-gray-700 hover:underline', href: item.href }, item.label));
            }
            else if (isInteractive && item.onClick) {
                content = (react_1.default.createElement("button", { className: 'cursor-pointer transition hover:text-gray-700 hover:underline', onClick: item.onClick, type: 'button' }, item.label));
            }
            else {
                content = react_1.default.createElement("span", { className: (0, types_1.classNames)(isCurrent ? 'text-gray-600' : 'text-gray-600') }, item.label);
            }
            return (react_1.default.createElement("li", { key: index, className: 'flex min-w-0 items-center' },
                react_1.default.createElement("span", { className: 'max-w-48 truncate' }, content),
                index < items.length - 1 && separator));
        }))));
}
//# sourceMappingURL=Breadcrumb.js.map