import { Component, EventEmitter, Output } from '@angular/core';
import { RouterLink, RouterLinkActive } from '@angular/router';
import { TranslatePipe } from '@ngx-translate/core';
import { NAV_ITEMS } from './nav-items';
import { NavIconComponent } from './nav-icon.component';

@Component({
  selector: 'app-horizontal-nav',
  standalone: true,
  imports: [RouterLink, RouterLinkActive, TranslatePipe, NavIconComponent],
  template: `
    <nav
      class="border-b border-slate-200 bg-white/90 backdrop-blur dark:border-slate-800 dark:bg-slate-900/90"
      aria-label="Main"
    >
      <div class="flex gap-1 overflow-x-auto px-4 py-2 sm:px-6">
        @for (item of navItems; track item.to) {
          <a
            [routerLink]="item.to"
            routerLinkActive="bg-brand-600 text-white shadow-sm"
            [routerLinkActiveOptions]="{ exact: item.to === '/' }"
            (click)="navigate.emit()"
            class="inline-flex shrink-0 items-center gap-2 rounded-xl px-3.5 py-2 text-sm font-medium text-slate-600 transition hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800 [&.bg-brand-600]:text-white"
          >
            <app-nav-icon [icon]="item.icon" />
            <span>{{ item.labelKey | translate }}</span>
          </a>
        }
      </div>
    </nav>
  `,
})
export class HorizontalNavComponent {
  @Output() navigate = new EventEmitter<void>();
  readonly navItems = NAV_ITEMS;
}
