'use client'

import { Search } from 'lucide-react'

interface FilterBarProps {
  searchQuery: string
  onSearchChange: (query: string) => void
  selectedPriority: string | null
  onPriorityChange: (priority: string | null) => void
  hasActiveFilters: boolean
  onClearFilters: () => void
}

export function FilterBar({
  searchQuery,
  onSearchChange,
  selectedPriority,
  onPriorityChange,
  hasActiveFilters,
  onClearFilters,
}: FilterBarProps) {
  return (
    <div className="flex flex-wrap gap-4">
      <div className="flex-1 min-w-[200px] relative">
        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
        <input
          type="text"
          placeholder="Suchen..."
          value={searchQuery}
          onChange={(e) => onSearchChange(e.target.value)}
          className="w-full pl-10 pr-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
      </div>
      <select
        value={selectedPriority || ''}
        onChange={(e) => onPriorityChange(e.target.value || null)}
        className="px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
      >
        <option value="">Alle Prioritaeten</option>
        <option value="critical">Kritisch</option>
        <option value="high">Hoch</option>
        <option value="medium">Mittel</option>
        <option value="low">Niedrig</option>
      </select>
      {hasActiveFilters && (
        <button
          onClick={onClearFilters}
          className="px-4 py-2 text-sm text-slate-600 hover:text-slate-900"
        >
          Filter zuruecksetzen
        </button>
      )}
    </div>
  )
}
