import React from 'react';

interface Props {
  category: string[];
  selectedCategory: string;
  setSelectedCategory: (cat: string) => void;
}

const NavigateCategory = ({ category, selectedCategory, setSelectedCategory }: Props) => {
  return (
    <div className="category-wrapper">
      {category.map((cat) => (
        <div
          key={cat}
          className={`category ${selectedCategory === cat ? "active" : ''}`}
          onClick={() => setSelectedCategory(cat)}
        >
          {cat}
        </div>
      ))}
    </div>
  );
};

export default NavigateCategory;
