web/components/TabFilters/index.tsx

"use client"

import styles from "./tabFilters.module.css"

import type { CardGalleryFilter } from "@/types/enums/cardGallery"
import type { CarouselCardFilter } from "@/types/enums/carouselCards"

interface Filter {
  identifier: CarouselCardFilter | CardGalleryFilter
  label: string
}

interface TabFiltersProps {
  categories: Array<Filter>
  selectedFilter: Filter["identifier"]
  onFilterSelect: (filter: Filter["identifier"]) => void
}

export default function TabFilters({
  categories,
  selectedFilter,
  onFilterSelect,
}: TabFiltersProps) {
  return (
    <div className={styles.container}>
      {categories.map((category) => (
        <button
          key={category.identifier}
          onClick={() => onFilterSelect(category.identifier)}
          className={
            selectedFilter === category.identifier
              ? styles.filterSelected
              : styles.filter
          }
          type="button"
        >
          {category.label}
        </button>
      ))}
    </div>
  )
}