import React from 'react';
import { useConfigContext } from '../../contexts/ConfigContext';
import './FilterPanel.css';

const FilterPanel = ({ filters, onFilterChange, showAvailableFilter = true }) => {
  const { userTypes, userTypeLabels } = useConfigContext();
  return (
    <div className="filter-panel">
      <h3>Filter</h3>
      {showAvailableFilter && (
        <div className="filter-group">
          <label>
            <input
              type="checkbox"
              checked={filters.availableOnly}
              onChange={(e) => onFilterChange('availableOnly', e.target.checked)}
            />
            Nur verfügbare
          </label>
        </div>
      )}
      <div className="filter-group">
        <label>Typ:</label>
        <select
          value={filters.type || ''}
          onChange={(e) => onFilterChange('type', e.target.value || null)}
          className="filter-select"
        >
          <option value="">Alle</option>
          {Object.keys(userTypes).map(type => (
            <option key={type} value={type}>
              {userTypeLabels[type] || type}
            </option>
          ))}
        </select>
      </div>
      <div className="filter-group">
        <label>Sortierung:</label>
        <select
          value={filters.sortBy || 'name'}
          onChange={(e) => onFilterChange('sortBy', e.target.value)}
          className="filter-select"
        >
          <option value="name">Name (A-Z)</option>
          <option value="nameDesc">Name (Z-A)</option>
          <option value="type">Typ</option>
        </select>
      </div>
    </div>
  );
};

export default FilterPanel;
