import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIcon } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { LocaleStore } from './language.service';

@Component({
  selector: 'lib-language-selector',
  standalone: true,
  imports: [MatButtonModule, MatIcon, MatMenuModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <button
      mat-icon-button
      [matMenuTriggerFor]="languageMenu"
      class="action-button"
      aria-label="Select language"
    >
      <mat-icon>translate</mat-icon>
    </button>
    <mat-menu #languageMenu="matMenu">
      <button mat-menu-item (click)="languageService.setLocale('en')">
        <span>English</span>
      </button>
      <button mat-menu-item (click)="languageService.setLocale('sl')">
        <span>Slovenian</span>
      </button>
    </mat-menu>
  `,
  styles: [
    `
      .action-button {
        border-radius: 50%;
        transition: background-color 0.2s ease;
      }
      .action-button:hover {
        background-color: rgba(255, 255, 255, 0.1);
      }
    `,
  ],
})
export class LanguageSelectorComponent {
  protected languageService = inject(LocaleStore);
}