'use client'

import { useState } from 'react'
import type { ComponentRenderProps } from '@json-render/react'

type Chip = { label: string; value: string; active?: boolean }

export function FilterChips({ element }: ComponentRenderProps) {
  const { chips } = element.props as { chips: Chip[]; dataPath?: string }
  const [activeChips, setActiveChips] = useState<Set<string>>(
    new Set(chips.filter(c => c.active).map(c => c.value))
  )

  const toggle = (value: string) => {
    const next = new Set(activeChips)
    next.has(value) ? next.delete(value) : next.add(value)
    setActiveChips(next)
  }

  return (
    <div className="flex flex-wrap gap-2 px-5 py-2 border-b border-gray-200">
      {chips.map(chip => (
        <button
          key={chip.value}
          onClick={() => toggle(chip.value)}
          className={`px-3 py-1 rounded-full text-xs font-medium transition-colors ${
            activeChips.has(chip.value)
              ? 'bg-indigo-600 text-white'
              : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
          }`}
        >
          {chip.label}
        </button>
      ))}
    </div>
  )
}
