import { Component, HostListener } from '@angular/core';
import { NavListComponent } from '../../../components/nav-list.component';
import { MobileHeaderComponent } from '../../../components/mobile-header.component';
import { RouterLink } from '@angular/router';

@Component({
  selector: 'app-navbar',
  host: { 'app-navbar': 'app-navbar10' },
  imports: [NavListComponent, MobileHeaderComponent,RouterLink],
  template: `
    <header>
      <div
        class="header-area header-area9 header-area-all d-none d-lg-block"
        id="header"
        [class.sticky]="isSticky"
      >
        <div class="container">
          <div class="row">
            <div class="col-12">
              <div class="header-elements">
                <div class="site-logo home1-site-logo">
                  <a routerLink="/"
                    ><img src="assets/img/logo/header-logo9.svg" alt="" />
                  </a>
                </div>

                <div class="main-menu-ex main-menu-ex9">
                  <app-nav-list />
                </div>

               <div class="home2-header-buttons">    
                    <a routerLink="/contact" class="theme-btn12">Schedule Tax Consultation <span><i class="fa-solid fa-arrow-right"></i></span></a>
                </div>
                <div class="mobile-menu-bar d-lg-none" (click)="toggleMenu()">
                  <i class="fas fa-bars"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
    <app-mobile-header [isMenuOpen]="isMenuOpen" 
  (toggle)="toggleMenu()" 
  (close)="closeMenu()"/>
  `,
  styles: ``,
})
export class NavbarComponent {
  isSticky: boolean = false;
  isMenuOpen = false;

  toggleMenu() {
    this.isMenuOpen = !this.isMenuOpen;
  }

  closeMenu() {
    this.isMenuOpen = false;
  }

  @HostListener('window:scroll', [])
  onWindowScroll() {
    this.isSticky = window.scrollY > 100;
  }
}
