import { Component, inject, computed } from '@angular/core';
import { Router } from '@angular/router';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-bottom-nav',
  imports: [NzIconModule, CommonModule],
  templateUrl: './bottom-nav.html',
  styleUrl: './bottom-nav.css'
})
export class BottomNav {
  private readonly router = inject(Router);

  currentTab = computed(() => {
    const url = this.router.url;
    if (url.startsWith('/catalog')) return 'catalog';
    if (url.startsWith('/my-courses')) return 'my-courses';
    if (url.startsWith('/create')) return 'create';
    return '';
  });

  navigate(tab: string): void {
    this.router.navigate([`/${tab}`]);
  }

  tabs = [
    { id: 'catalog', label: 'CATALOGUE', icon: 'appstore' },
    { id: 'my-courses', label: 'APPRENDRE', icon: 'read' },
    { id: 'create', label: 'CRÉER', icon: 'plus' }
  ];
}
