/** Saved-views-lite: a pill row that filters a list by one dimension. */

export interface ChipDef { key: string; label: string; count?: number }

export function FilterChips(props: {
  chips: ChipDef[]
  active: string
  onChange: (key: string) => void
}) {
  return (
    <div className="wf-chips" role="group">
      {props.chips.map((c) => (
        <button
          key={c.key}
          type="button"
          aria-pressed={c.key === props.active}
          className={`wf-chip${c.key === props.active ? ' active' : ''}`}
          onClick={() => props.onChange(c.key)}
        >
          {c.label}
          {c.count !== undefined && <span className="count">{c.count}</span>}
        </button>
      ))}
    </div>
  )
}