import { CommonModule } from '@angular/common';
import { Component, inject } from '@angular/core';
import { ButtonModule } from 'primeng/button';

import { AppLanguage, LanguageService } from '../../core/services/language.service';
import { ThemeService } from '../../core/services/theme.service';

@Component({
  selector: 'app-auth-toolbar',
  standalone: true,
  imports: [CommonModule, ButtonModule],
  templateUrl: './auth-toolbar.component.html'
})
export class AuthToolbarComponent {
  readonly theme = inject(ThemeService);
  readonly language = inject(LanguageService);

  get languageOptions() {
    const current = this.language.current();
    return [
      { code: 'no', label: `${current === 'no' ? '✓ ' : ''}🇳🇴 Norsk` },
      { code: 'es', label: `${current === 'es' ? '✓ ' : ''}🇪🇸 Español` },
      { code: 'pl', label: `${current === 'pl' ? '✓ ' : ''}🇵🇱 Polski` },
      { code: 'en', label: `${current === 'en' ? '✓ ' : ''}🇬🇧 English` }
    ];
  }

  changeLanguage(event: Event) {
    this.language.set((event.target as HTMLSelectElement).value as AppLanguage);
  }
}