import React from 'react';
import { Search, Filter, AlertCircle } from 'lucide-react';

const severityLevels = ['All Severities', 'Critical', 'High', 'Medium', 'Low'];

export default function CVEFilters({ searchQuery, onSearchChange, selectedVendor, onVendorChange, vendors, selectedSeverity, onSeverityChange }) {
  return (
    <div className="panel-card">
      <div className="grid grid-cols-1 gap-4">
        <div>
          <label className="block text-xs font-medium text-gray-300 mb-2 uppercase tracking-wider">
            <Search className="inline w-4 h-4 mr-1" />
            Search CVEs
          </label>
          <input
            type="text"
            placeholder="CVE ID or description..."
            value={searchQuery}
            onChange={(e) => onSearchChange(e.target.value)}
            className="intel-input w-full"
            aria-label="Search CVEs by ID or description"
          />
        </div>

        <div className="grid grid-cols-2 gap-4">
          <div>
            <label className="block text-xs font-medium text-gray-300 mb-2 uppercase tracking-wider">
              <Filter className="inline w-4 h-4 mr-1" />
              Vendor
            </label>
            <select
              value={selectedVendor}
              onChange={(e) => onVendorChange(e.target.value)}
              className="intel-input w-full"
              aria-label="Filter by vendor"
            >
              {vendors.map(vendor => (
                <option key={vendor} value={vendor}>{vendor}</option>
              ))}
            </select>
          </div>

          <div>
            <label className="block text-xs font-medium text-gray-300 mb-2 uppercase tracking-wider">
              <AlertCircle className="inline w-4 h-4 mr-1" />
              Severity
            </label>
            <select
              value={selectedSeverity}
              onChange={(e) => onSeverityChange(e.target.value)}
              className="intel-input w-full"
              aria-label="Filter by severity"
            >
              {severityLevels.map(level => (
                <option key={level} value={level}>{level}</option>
              ))}
            </select>
          </div>
        </div>
      </div>
    </div>
  );
}
