Collection Filter Bar

import { CollectionFilterBar } from '@/components/ui/collection-filter-bar'

'use client'

import { useMemo, useState } from 'react'
import { CollectionFilterBar } from '@/components/ui/collection-filter-bar'

const FILTERS = [
  { label: 'Waterproof', count: 24 },
  { label: 'Insulated', count: 18 },
  { label: 'Packable', count: 31 },
  { label: 'Recycled shell', count: 12 },
  { label: 'Under $150', count: 47 },
]

const SORT_OPTIONS = [
  'Featured',
  'Newest',
  'Price: low to high',
  'Price: high to low',
]

/** Demo tally keyed by sorted filter labels, consumer owns the filtering math. */
const RESULTS: Record<string, string> = {
  '': '128 styles',
  Waterproof: '24 styles',
  Insulated: '18 styles',
  Packable: '31 styles',
  'Recycled shell': '12 styles',
  'Under $150': '47 styles',
  'Insulated,Waterproof': '9 styles',
  'Packable,Waterproof': '14 styles',
  'Insulated,Packable': '7 styles',
  'Insulated,Packable,Waterproof': '4 styles',
  'Recycled shell,Waterproof': '6 styles',
  'Under $150,Waterproof': '11 styles',
  'Insulated,Under $150': '8 styles',
  'Packable,Under $150': '19 styles',
  'Recycled shell,Under $150': '5 styles',
  'Insulated,Packable,Under $150,Waterproof': '2 styles',
}

export default function CollectionFilterBarDemo() {
  const [selected, setSelected] = useState(['Waterproof', 'Insulated'])
  const [sort, setSort] = useState('Featured')

  const resultsLabel = useMemo(() => {
    const key = [...selected].sort().join(',')
    return RESULTS[key] ?? `${Math.max(2, 128 - selected.length * 11)} styles`
  }, [selected])

  return (
    <div className="mx-auto w-full max-w-5xl px-4 py-10 sm:px-6 sm:py-14">
      <CollectionFilterBar
        filters={FILTERS}
        selected={selected}
        onToggle={(label) => {
          setSelected((prev) =>
            prev.includes(label)
              ? prev.filter((x) => x !== label)
              : [...prev, label]
          )
        }}
        sortOptions={SORT_OPTIONS}
        sortValue={sort}
        onSortChange={setSort}
        resultsLabel={resultsLabel}
        onClearAll={() => setSelected([])}
      />
    </div>
  )
}