Categories and Topics

import { Lookup, InfoLabels, PillBadge, Breadcrumb, Popover, TreemapChart } from '@cleen/cleen-components';
import { useCategoryHierarchy, useTrendingTopics } from '@/hooks/useTaxonomy';

export function CategoryBrowser() {
  const { categories, breadcrumb, drill } = useCategoryHierarchy();
  const { topics } = useTrendingTopics();

  return (
    <div className="cat-browser">
      <Breadcrumb items={breadcrumb} onClick={drill} />
      <div className="cat-grid">
        {categories.map((c) => (
          <Popover key={c.id} content={<InfoLabels rows={c.facts} />}>
            <button className="cat-card" onClick={() => drill(c)}>
              <span>{c.name}</span>
              <PillBadge tone="neutral">{c.itemCount}</PillBadge>
            </button>
          </Popover>
        ))}
      </div>
      <h2>Trending topics</h2>
      <TreemapChart data={topics} valueKey="weight" labelKey="name" />
    </div>
  );
}