import { cn } from '@/lib/cn'
import { CATEGORY_LABELS, PLANT_CATEGORIES, type CategoryFilter } from '@/lib/plants'

/**
 * Horizontal, scrollable "All + each category" chip row. Shared by the /plants
 * page and the PlantPicker so both filter the catalog identically.
 */
export function CategoryChips({
  value,
  onChange,
  size = 'md',
}: {
  value: CategoryFilter
  onChange: (c: CategoryFilter) => void
  size?: 'sm' | 'md'
}) {
  const chip = (v: CategoryFilter, label: string) => (
    <button
      key={v}
      type="button"
      onClick={() => onChange(v)}
      className={cn(
        'shrink-0 rounded-full px-3 font-medium transition-colors',
        size === 'sm' ? 'py-1 text-xs' : 'py-1 text-sm',
        value === v ? 'bg-accent text-accent-contrast' : 'bg-border/50 text-muted hover:text-fg',
      )}
    >
      {label}
    </button>
  )
  return (
    <div className="flex gap-1.5 overflow-x-auto">
      {chip('all', 'All')}
      {PLANT_CATEGORIES.map((c) => chip(c, CATEGORY_LABELS[c]))}
    </div>
  )
}