How can I change my rawg API to call it for a angular search component where I can search for both genres and game name?

Question

currently am calling api from getGames() function for specific genres and looking to implement a search component where one can search genres as well as game names

my service file is as follows:

import { HttpClient } from '@angular/common/http'
import { Injectable } from '@angular/core'
import { Observable, map } from 'rxjs'
import { environment } from 'src/environments/environment'

import { Igameschart } from '../interfaces'

interface IgamesData {
  results: [
    {
      name: string
      released: number
      platforms: [
        {
          platform:{
            name:string
          }
        }
      ]
      background_image: string
      rating: number
    }
  ]
}

export interface IGamesService {
  getGames(genre: string): Observable<Igameschart[]>
}
@Injectable({
  providedIn: 'root',
})
export class GamesService implements IGamesService {
  constructor(private httpClient: HttpClient) {}
  getGames(genre?: string): Observable<Igameschart[]> {
    return this.httpClient
      .get<IgamesData>(
        `${environment.baseUrl}api.rawg.io/api/games?` +
          `genres=${genre}&key=${environment.appId}`
      )
      .pipe(map((data) => this.tarnsformToIgamesData(data)))
  }
  private tarnsformToIgamesData(data: IgamesData): Igameschart[] {
    return data.results.map(item =>{ return{
      name: item.name,
      released: item.released,
      platform:item.platforms[0].platform.name,
      image: item.background_image,
      rating: item.rating,
    }})
  }
}

tried altering the API to

  getGames(gname:string, genre?: string): Observable<Igameschart[]> {
    return this.httpClient
      .get<IgamesData>(
        `${environment.baseUrl}api.rawg.io/api/games?` +
          `games=${gname}&genres=${genre}&key=${environment.appId}`
      )
      .pipe(map((data) => this.tarnsformToIgamesData(data)))
  }

but the results came same no matter what search term I put in.