import { useState } from 'react'

const CATEGORIES = [
  { id: 'all', name: 'Todos', icon: '📱' },
  { id: 'produtividade', name: 'Produtividade', icon: '⚡' },
  { id: 'utilidades', name: 'Utilidades', icon: '🔧' },
  { id: 'games', name: 'Games', icon: '🎮' },
  { id: 'ferramentas', name: 'Ferramentas', icon: '🛠️' },
  { id: 'educacao', name: 'Educação', icon: '📚' },
  { id: 'entretenimento', name: 'Entretenimento', icon: '🎬' }
]

export default function CategoryMenu({ selectedCategory, onSelect }) {
  return (
    <div className="flex flex-wrap gap-2 mb-6">
      {CATEGORIES.map((category) => (
        <button
          key={category.id}
          onClick={() => onSelect(category.id)}
          className={`px-4 py-2 rounded-lg font-medium transition-all flex items-center gap-2 ${
            selectedCategory === category.id
              ? 'bg-blue-600 text-white shadow-md'
              : 'bg-white text-gray-700 hover:bg-gray-100'
          }`}
        >
          <span>{category.icon}</span>
          <span>{category.name}</span>
        </button>
      ))}
    </div>
  )
}