/**
 * Tag pills sub-component for FileTextbox.
 */
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { cn } from '../../utils/cn.js';
import { get_tag_color } from './utils.js';
import { HiX, HiPlus } from 'react-icons/hi';
export function TagPills({ tags, tag_options, editable, on_add, on_remove }) {
    const [show_picker, set_show_picker] = useState(false);
    if (!tags?.length && !editable)
        return null;
    const available = tag_options?.filter((t) => !tags?.includes(t)) ?? [];
    return (_jsxs("div", { className: "flex flex-wrap gap-1 mt-1 mb-1 ml-1", children: [tags?.map((tag) => (_jsxs("span", { className: cn('inline-flex items-center gap-0.5 px-2 py-0.5 rounded-full text-xs font-medium', get_tag_color(tag)), children: [tag, editable && on_remove && (_jsx("button", { type: "button", onClick: () => on_remove(tag), className: "ml-0.5 hover:opacity-70", children: _jsx(HiX, { className: "h-3 w-3" }) }))] }, tag))), editable && available.length > 0 && (_jsxs("div", { className: "relative", children: [_jsx("button", { type: "button", onClick: () => set_show_picker(!show_picker), className: "inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded-full text-xs border border-dashed border-muted-foreground/40 text-muted-foreground hover:border-muted-foreground", children: _jsx(HiPlus, { className: "h-3 w-3" }) }), show_picker && (_jsx("div", { className: "absolute z-50 top-full left-0 mt-1 bg-popover border rounded-md shadow-md p-1 min-w-[120px]", style: { backgroundColor: 'hsl(var(--popover))' }, children: available.map((tag) => (_jsx("button", { type: "button", className: "block w-full text-left px-2 py-1 text-xs rounded hover:bg-accent", onClick: () => { on_add?.(tag); set_show_picker(false); }, children: tag }, tag))) }))] }))] }));
}
//# sourceMappingURL=tag_pills.js.map