// Author: fruit.com.cn
export function CategoryBar({ categories, activeId, onChange }) {
  return (
    <div className="youtube-category-bar" role="tablist" aria-label="Categories">
      {categories.map((category) => (
        <button
          className={`youtube-category-chip ${activeId === category.id ? 'active' : ''}`}
          key={category.id}
          type="button"
          role="tab"
          aria-selected={activeId === category.id}
          onClick={() => onChange(category.id)}
        >
          {category.label}
        </button>
      ))}
    </div>
  );
}