<div class="language-selector" role="listbox">
  <button class="language-button" (click)="toggleDropdown()" (keydown)="onKeyDown($event)" aria-haspopup="listbox" [attr.aria-expanded]="dropdownOpen">
    <img [src]="$safeNavigationMigration(languageService.getCurrentLanguage()?.flagSvg)" 
         [alt]="$safeNavigationMigration(languageService.getCurrentLanguage()?.name)" 
         class="language-flag">
    <span class="language-code">{{ languageService.getCurrentLanguage()?.code?.toUpperCase() }}</span>
    <app-icon name="chevronDown" [size]="14" [class.rotated]="dropdownOpen" class="dropdown-arrow" />
  </button>

  <div class="language-dropdown" [class.open]="dropdownOpen">
    @for (lang of languageService.languages; track lang.code) {
      <button 
        class="language-option" 
        role="option"
        [attr.aria-selected]="languageService.currentLanguage() === lang.code"
        [class.active]="languageService.currentLanguage() === lang.code"
        [class.disabled]="!lang.enabled"
        [disabled]="!lang.enabled"
        (click)="selectLanguage(lang)">
        <img [src]="lang.flagSvg" [alt]="lang.name" class="option-flag">
        <span class="option-name">{{ lang.name }}</span>
      </button>
    }
  </div>

  <button class="currency-button" (click)="toggleCurrency()">
    <span class="currency-symbol">{{ languageService.getCurrentCurrency()?.symbol }}</span>
    <span class="currency-code">{{ languageService.currentCurrency() }}</span>
    <app-icon name="chevronDown" [size]="14" [class.rotated]="currencyOpen" class="dropdown-arrow" />
  </button>

  <div class="currency-dropdown" [class.open]="currencyOpen">
    @for (cur of languageService.currencies; track cur.code) {
      <button 
        class="currency-option" 
        [class.active]="languageService.currentCurrency() === cur.code"
        (click)="selectCurrency(cur)">
        <span class="cur-symbol">{{ cur.symbol }}</span>
        <span class="cur-name">{{ cur.name }}</span>
        <span class="cur-code">{{ cur.code }}</span>
      </button>
    }
  </div>
</div>
