FilterPanel.jsx

import React from 'react';

function Select({ label, value, onChange, options }) {
  return (
    <div className="filter-group">
      <label className="filter-label">{label}</label>
      <select
        className="filter-select"
        value={value}
        onChange={e => onChange(e.target.value)}
      >
        {options.map(o =>
          typeof o === 'string'
            ? <option key={o} value={o}>{o}</option>
            : <option key={o.value} value={o.value}>{o.label}</option>
        )}
      </select>
    </div>
  );
}

export default function FilterPanel({
  topic, setTopic, topics,
  status, setStatus, statuses,
  impact, setImpact, impacts,
  sortBy, setSortBy, sortOptions,
  onReset
}) {
  return (
    <div className="filter-panel">
      <div className="filter-header">
        <span className="filter-title">Filters</span>
        <button className="reset-btn" onClick={onReset}>Reset</button>
      </div>
      <Select label="Topic"   value={topic}  onChange={setTopic}  options={topics}   />
      <Select label="Status"  value={status} onChange={setStatus} options={statuses} />
      <Select label="Impact"  value={impact} onChange={setImpact} options={impacts}  />
      <Select label="Sort by" value={sortBy} onChange={setSortBy} options={sortOptions} />
    </div>
  );
}