'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { paletteFor } from '../posts/badges.js';
/**
 * Tag UI for the Pages area. Two variants:
 *   - PageTagChip — interactive filter chip (filter bar). Toggles a tag
 *     on/off; announces pressed state for screen readers.
 *   - PageTagPill — static inline pill (Tags column). Compact, with a
 *     colored dot so tags don't rely on color alone.
 *
 * Both resolve color through the shared `paletteFor` palette so they
 * stay consistent with Post Type badges and work in light/dark mode.
 */
const DOT_COLOR = {
    purple: 'bg-violet-500',
    green: 'bg-emerald-500',
    orange: 'bg-amber-500',
    red: 'bg-red-500',
    blue: 'bg-blue-500',
    pink: 'bg-pink-500',
    gray: 'bg-muted-foreground',
};
export function tagDotColor(color) {
    if (!color)
        return DOT_COLOR.gray;
    return DOT_COLOR[color] ?? DOT_COLOR.gray;
}
export function PageTagChip({ name, color, count, selected, onToggle, }) {
    const p = paletteFor(color);
    return (_jsxs("button", { type: "button", onClick: onToggle, "aria-pressed": selected, className: `focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium transition-colors focus:outline-none focus-visible:ring-2 ${selected
            ? `${p.bg} ${p.text} border-transparent ring-1 ${p.ring}`
            : 'border-border bg-background text-foreground hover:bg-accent'}`, children: [_jsx("span", { "aria-hidden": true, className: `h-2 w-2 rounded-full ${tagDotColor(color)}` }), name, typeof count === 'number' && (_jsx("span", { className: "text-muted-foreground tabular-nums", children: count }))] }));
}
export function PageTagPill({ name, color }) {
    const p = paletteFor(color);
    return (_jsxs("span", { className: `inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium ${p.bg} ${p.text}`, children: [_jsx("span", { "aria-hidden": true, className: `h-1.5 w-1.5 rounded-full ${tagDotColor(color)}` }), name] }));
}
export function PageTagsCell({ tagSlugs, primaryTagId, resolve, }) {
    if (tagSlugs.length === 0) {
        return _jsx("span", { className: "text-muted-foreground text-xs", children: "\u2014" });
    }
    // Show the primary tag first, then the rest, so grouping context is
    // visible at a glance.
    const ordered = [...tagSlugs].sort((a, b) => {
        if (a === primaryTagId)
            return -1;
        if (b === primaryTagId)
            return 1;
        return 0;
    });
    return (_jsx("div", { className: "flex flex-wrap items-center gap-1", children: ordered.map((slug) => {
            const tag = resolve(slug);
            return _jsx(PageTagPill, { name: tag?.name ?? slug, color: tag?.color ?? null }, slug);
        }) }));
}
//# sourceMappingURL=tag-badges.js.map