export default function CategoryFilter({ selectedCategory, setSelectedCategory }) {
  const categories = ["Camouflaged", "Non-Camouflaged", "Large", "Tiny"];

  return (
    <div className="flex space-x-2">
      {categories.map((category) => (
        <button
          key={category}
          onClick={() => {
            console.log(category);
            setSelectedCategory(category);
          }}
          className={`px-4 py-2 rounded-lg transition ${
            selectedCategory === category ? "bg-blue-500" : "bg-gray-700"
          } hover:bg-blue-400`}
        >
          {category}
        </button>
      ))}
    </div>
  );
}
