import React from "react";
import "./CategorySelector.css";

const CategorySelector = ({ categories, activeCategory, onCategoryChange }) => {
  return (
    <div className="category-selector">
      {categories.map((cat) => (
        <button
          key={cat.id}
          className={`category-btn ${activeCategory === cat.id ? "active" : ""}`}
          onClick={() => onCategoryChange(cat.id)}
        >
          {cat.displayName}
        </button>
      ))}
    </div>
  );
};

export default CategorySelector;
