function TechFilter({ allTech, active, onToggle, onClear, matchCount, totalCount }) {
  return (
    <div className="tagfilter no-print">
      <span className="tagfilter__label">Filter by tech</span>
      {allTech.map(t => {
        const isActive = active.includes(t);
        return (
          <button
            key={t}
            className={`tag-btn ${isActive ? "tag-btn--active" : ""}`}
            onClick={() => onToggle(t)}
          >
            {t}
          </button>
        );
      })}
      {active.length > 0 && (
        <button className="tag-btn tag-btn--clear" onClick={onClear}>
          <i data-lucide="x" style={{ width: 11, height: 11 }}></i> Clear
        </button>
      )}
      <span className="tagfilter__count">
        {active.length === 0
          ? `${totalCount} engagements`
          : `${matchCount} of ${totalCount} match`}
      </span>
    </div>
  );
}

window.TechFilter = TechFilter;