"use client";

import { FILTERS, type GalleryCategory } from "./galleryData";

interface GalleryFiltersProps {
  active: GalleryCategory | "all";
  onChange: (filter: GalleryCategory | "all") => void;
}

export function GalleryFilters({ active, onChange }: GalleryFiltersProps) {
  return (
    <div className="gallery-filters" data-screen-label="02 Filters">
      <div className="filter-row">
        {FILTERS.map((filter) => (
          <button
            type="button"
            key={filter.value}
            className={`pill${filter.value === active ? " on" : ""}`}
            onClick={() => onChange(filter.value)}
          >
            {filter.label} <span className="pc">{filter.count}</span>
          </button>
        ))}
      </div>
    </div>
  );
}