'use client'

import React from 'react'
import { REGULATION_CHIPS } from '../_types'

export default function FilterBar({
  filter,
  regulationFilter,
  searchQuery,
  onFilter,
  onRegulationFilter,
  onSearch,
}: {
  filter: string
  regulationFilter: string
  searchQuery: string
  onFilter: (v: string) => void
  onRegulationFilter: (v: string) => void
  onSearch: (v: string) => void
}) {
  return (
    <>
      {/* Regulation Filter Chips */}
      <div className="flex items-center gap-2 flex-wrap">
        <span className="text-xs text-gray-500 mr-1">Regulation:</span>
        {REGULATION_CHIPS.map(r => (
          <button
            key={r.key}
            onClick={() => onRegulationFilter(r.key)}
            className={`px-3 py-1 text-xs rounded-full transition-colors ${
              regulationFilter === r.key ? 'bg-purple-600 text-white' : 'bg-purple-50 text-purple-700 hover:bg-purple-100'
            }`}
          >
            {r.label}
          </button>
        ))}
      </div>

      {/* Search + Status Filter */}
      <div className="flex flex-col sm:flex-row items-start sm:items-center gap-3">
        <input
          type="text"
          value={searchQuery}
          onChange={e => onSearch(e.target.value)}
          placeholder="Suche nach Pflichten..."
          className="flex-1 px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500"
        />
        <div className="flex items-center gap-2 flex-wrap">
          {['all', 'overdue', 'pending', 'in-progress', 'completed', 'critical'].map(f => (
            <button
              key={f}
              onClick={() => onFilter(f)}
              className={`px-3 py-1.5 text-xs rounded-full transition-colors ${
                filter === f ? 'bg-purple-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
              }`}
            >
              {f === 'all' ? 'Alle' : f === 'in-progress' ? 'In Bearbeitung' : f === 'overdue' ? 'Ueberfaellig' : f === 'pending' ? 'Ausstehend' : f === 'completed' ? 'Abgeschlossen' : 'Kritisch'}
            </button>
          ))}
        </div>
      </div>
    </>
  )
}
