'use client'

import type { ScreenDefinition } from '../types'

interface CategoryFilterProps {
  screens: ScreenDefinition[]
  categories: string[]
  colors: Record<string, { bg: string; border: string; text: string }>
  labels: Record<string, string>
  selectedCategory: string | null
  selectedNode: string | null
  onSelectCategory: (category: string | null) => void
  onReset: () => void
}

export function CategoryFilter({
  screens,
  categories,
  colors,
  labels,
  selectedCategory,
  selectedNode,
  onSelectCategory,
  onReset,
}: CategoryFilterProps) {
  return (
    <div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
      <div className="flex flex-wrap gap-2">
        <button
          onClick={onReset}
          className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
            selectedCategory === null && !selectedNode
              ? 'bg-slate-800 text-white'
              : 'bg-slate-100 text-slate-700 hover:bg-slate-200'
          }`}
        >
          Alle ({screens.length})
        </button>
        {categories.map((key) => {
          const count = screens.filter(s => s.category === key).length
          const catColors = colors[key] || { bg: '#f1f5f9', border: '#94a3b8', text: '#475569' }
          return (
            <button
              key={key}
              onClick={() => onSelectCategory(selectedCategory === key ? null : key)}
              className="px-4 py-2 rounded-lg text-sm font-medium transition-all flex items-center gap-2"
              style={{
                background: selectedCategory === key ? catColors.border : catColors.bg,
                color: selectedCategory === key ? 'white' : catColors.text,
              }}
            >
              <span className="w-3 h-3 rounded-full" style={{ background: catColors.border }} />
              {labels[key]} ({count})
            </button>
          )
        })}
      </div>
    </div>
  )
}
