'use client'

import { Header } from './header'
import { useSearchParams, useRouter } from 'next/navigation'

export function HeaderWrapper() {
  const searchParams = useSearchParams()
  const router = useRouter()
  
  const selectedLabels = searchParams.get('labels')?.split(',').filter(Boolean) || []

  const handleLabelFilterChange = (labels: string[]) => {
    const params = new URLSearchParams(searchParams.toString())
    
    if (labels.length > 0) {
      params.set('labels', labels.join(','))
    } else {
      params.delete('labels')
    }

    router.push(`/?${params.toString()}`)
  }

  return <Header selectedLabels={selectedLabels} onLabelFilterChange={handleLabelFilterChange} />
}