// Componente de botones de filtro
function FilterButtons({ filters, activeFilter, onFilterChange }) {
    return (
        <div className="mb-8 flex justify-center space-x-4">
            {filters.map((filter) => (
                <button
                    key={filter.id}
                    onClick={() => onFilterChange(filter.id)}
                    className={`px-6 py-3 rounded-lg border-2 transition-all duration-200 font-medium ${
                        activeFilter === filter.id
                            ? 'border-orange-500 bg-blue-800 text-white'
                            : 'border-blue-300 bg-white text-blue-800 hover:bg-blue-50 hover:border-orange-500 hover:text-blue-900'
                    }`}
                >
                    {filter.label} [{filter.count}]
                </button>
            ))}
        </div>
    );
}