import PropTypes from "prop-types";

export default function CategoryTabs({
  categories,
  activeCategory,
  onSelectCategory,
}) {
  return (
    <div
      className="flex flex-wrap justify-center gap-6 mt-5 mb-10 text-lg font-medium text-slate-200
  "
    >
      {categories.map((cat) => (
        <button
          key={cat || "all"}
          onClick={() => onSelectCategory(cat)}
          className={`uppercase transition-colors duration-200 hover:text-white cursor-pointer ${activeCategory === cat
              ? "text-white border-b-2 border-gold pb-1"
              : ""
            }`}
        >
          {cat}
        </button>
      ))}
    </div>
  );
}

CategoryTabs.propTypes = {
  categories: PropTypes.arrayOf(PropTypes.string).isRequired,
  activeCategory: PropTypes.string.isRequired,
  onSelectCategory: PropTypes.func.isRequired,
};
