import { type CategoryFilter } from '../types';

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

function FilterBar({ categories, activeCategory, onCategoryChange }: FilterBarProps) {
  return (
    <div className="flex flex-wrap justify-center gap-2 mb-8">
      {categories.map((category) => (
        <button
          key={category}
          onClick={() => onCategoryChange(category)}
          className={`px-4 py-2 rounded-full font-medium transition-all duration-200 ${
            activeCategory === category
              ? 'bg-amber-700 text-white shadow-md'
              : 'bg-gray-200 text-gray-700 hover:bg-amber-100 hover:text-amber-800'
          }`}
        >
          {category === 'all' ? 'All Items' : category}
        </button>
      ))}
    </div>
  );
}

export default FilterBar;
