'use client';

import React from 'react';
import { useBrand } from '@/context/BrandContext';

interface CategoryPillsProps {
  activeCategory: string;
  onSelectCategory: (category: string) => void;
}

const CATEGORIES = [
  { id: 'all', label: '🔥 Todo el Catálogo' },
  { id: 'Sandalias', label: '🩴 Sandalias' },
  { id: 'Zapatillas', label: '👟 Zapatillas' },
  { id: 'Gorras', label: '🧢 Gorras' },
  { id: 'Bolsos', label: '👜 Bolsos' },
  { id: 'Carrieles', label: '👝 Carrieles' },
  { id: 'Maletines', label: '🎒 Maletines' },
  { id: 'Ropa', label: '👕 Ropa' },
  { id: 'Accesorios', label: '🕶️ Accesorios' },
  { id: 'Nike', label: '⚡ Nike' },
  { id: 'Adidas', label: '🛹 Adidas' },
  { id: 'Jordan', label: '🏀 Jordan' },
  { id: 'flash', label: '⚡ Ofertas Flash' },
  { id: 'under120', label: '💰 Menos de $120k' },
];

export const CategoryPills: React.FC<CategoryPillsProps> = ({
  activeCategory,
  onSelectCategory,
}) => {
  const { currentBrand } = useBrand();

  return (
    <div className="flex items-center space-x-2 overflow-x-auto pb-3 scrollbar-none">
      {CATEGORIES.map((cat) => {
        const isActive = activeCategory === cat.id;
        return (
          <button
            key={cat.id}
            onClick={() => onSelectCategory(cat.id)}
            className={`shrink-0 text-xs sm:text-sm font-bold px-4 py-2 rounded-full transition-all duration-300 cursor-pointer select-none ${
              isActive
                ? `bg-gradient-to-r ${currentBrand.colors.primaryGradient} text-white shadow-md scale-105 border border-white/20`
                : 'bg-slate-900/60 hover:bg-slate-800 text-slate-300 border border-slate-800'
            }`}
          >
            {cat.label}
          </button>
        );
      })}
    </div>
  );
};