import { ChangeDetectionStrategy, Component } from '@angular/core';
import { RouterLink, RouterLinkActive } from '@angular/router';
import { MatIconModule } from '@angular/material/icon';
import { MatBadgeModule } from '@angular/material/badge';
import { NAV_DESTINATIONS } from '../../models/nav.model';

/**
 * Bottom Navigation Bar for mobile (compact breakpoint).
 * Per spec Section 3.2: M3 NavigationBar, 3–5 destinations,
 * active destination uses M3 indicator pill.
 * Visible only on compact (< 600px) breakpoint.
 */
@Component({
  selector: 'app-bottom-nav',
  standalone: true,
  imports: [RouterLink, RouterLinkActive, MatIconModule, MatBadgeModule],
  templateUrl: './bottom-nav.component.html',
  styleUrl: './bottom-nav.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BottomNavComponent {
  /** Show only first 5 destinations on bottom nav */
  protected readonly destinations = NAV_DESTINATIONS.slice(0, 5);
}