"use client";

import type { BlogCategory } from "@/data/blog-posts";

interface BlogFilterBarProps {
  categories: BlogCategory[];
  activeCat: BlogCategory;
  onCatChange: (cat: BlogCategory) => void;
  query: string;
  onQueryChange: (q: string) => void;
  counts: Record<string, number>;
}

export function BlogFilterBar({
  categories,
  activeCat,
  onCatChange,
  query,
  onQueryChange,
  counts,
}: BlogFilterBarProps) {
  return (
    <div className="b-filterbar">
      <div className="b-wrap b-filterbar-inner">
        <div className="b-filter-cats">
          {categories.map((cat) => (
            <button
              key={cat}
              className={`b-filter-btn${activeCat === cat ? " active" : ""}`}
              onClick={() => onCatChange(cat)}
            >
              {cat}
              <span className="b-count">{counts[cat] ?? 0}</span>
            </button>
          ))}
        </div>

        <div className="b-search">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="currentColor" strokeWidth="2" />
            <path d="m20 20-3-3" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
          </svg>
          <input
            value={query}
            onChange={(e) => onQueryChange(e.target.value)}
            placeholder="Search articles"
            aria-label="Search articles"
          />
        </div>
      </div>
    </div>
  );
}