import styles from './CategoryTab.module.css'

interface CategoryTabProps {
  categories: string[]
  activeCategory: string
  onCategoryChange: (category: string) => void
}

export default function CategoryTab({
  categories,
  activeCategory,
  onCategoryChange
}: CategoryTabProps) {
  return (
    <div className={styles.tabContainer}>
      {categories.map((category) => (
        <button
          key={category}
          className={`${styles.tab} ${
            category === activeCategory ? styles.active : styles.inactive
          }`}
          onClick={() => onCategoryChange(category)}
        >
          {category}
        </button>
      ))}
    </div>
  )
}
