'use client'

import React from 'react'

const FILTER_OPTIONS = [
  'all', 'implemented', 'partial', 'not-implemented',
  'technical', 'organizational', 'preventive', 'detective',
]

function filterLabel(f: string): string {
  return f === 'all' ? 'Alle' :
    f === 'implemented' ? 'Implementiert' :
    f === 'partial' ? 'Teilweise' :
    f === 'not-implemented' ? 'Offen' :
    f === 'technical' ? 'Technisch' :
    f === 'organizational' ? 'Organisatorisch' :
    f === 'preventive' ? 'Praeventiv' : 'Detektiv'
}

export function FilterBar({
  filter,
  onFilterChange,
}: {
  filter: string
  onFilterChange: (f: string) => void
}) {
  return (
    <div className="flex items-center gap-2 flex-wrap">
      <span className="text-sm text-gray-500">Filter:</span>
      {FILTER_OPTIONS.map(f => (
        <button
          key={f}
          onClick={() => onFilterChange(f)}
          className={`px-3 py-1 text-sm rounded-full transition-colors ${
            filter === f
              ? 'bg-purple-600 text-white'
              : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
          }`}
        >
          {filterLabel(f)}
        </button>
      ))}
    </div>
  )
}
