import { Component, inject } from '@angular/core';
import { TranslatePipe } from '@ngx-translate/core';
import { LanguageService } from '../../core/services/language.service';

@Component({
  selector: 'app-language-switcher',
  standalone: true,
  imports: [TranslatePipe],
  template: `
    <div class="relative" [class]="className">
      <select
        class="select !w-auto !py-2 !pr-9 !text-sm"
        [value]="language.currentLanguage()"
        (change)="onChange($event)"
        [attr.aria-label]="'language.label' | translate"
      >
        <option value="en">EN</option>
        <option value="pl">PL</option>
      </select>
      <svg
        class="pointer-events-none absolute right-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-slate-400"
        aria-hidden="true"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
      >
        <path d="m6 9 6 6 6-6" />
      </svg>
    </div>
  `,
})
export class LanguageSwitcherComponent {
  readonly language = inject(LanguageService);
  className = '';

  onChange(event: Event): void {
    const value = (event.target as HTMLSelectElement).value as 'en' | 'pl';
    this.language.setLanguage(value);
  }
}
