import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { Button } from '../../ui/button.js';
const CATEGORIES = [
    { label: 'All', value: null },
    { label: 'Workflow', value: 'Workflow' },
    { label: 'Code Generation', value: 'Code Generation' },
    { label: 'Analysis', value: 'Analysis' },
    { label: 'Reference', value: 'Reference' },
];
export function CategoryFilter({ activeCategory, onCategoryChange, counts }) {
    return (_jsx("div", { className: "flex flex-wrap gap-2", role: "group", "aria-label": "Filter by category", children: CATEGORIES.map(({ label, value }) => (_jsxs(Button, { variant: activeCategory === value ? 'default' : 'outline', size: "sm", onClick: () => onCategoryChange(value), children: [label, counts && value ? (_jsxs("span", { className: "ms-1 text-xs opacity-70", children: ["(", counts[value], ")"] })) : null] }, label))) }));
}
