import { Component, ViewChild, Input } from '@angular/core';
import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-dropdown-nav-button',
  templateUrl: './dropdown-nav-button.component.html',
  styleUrl: './dropdown-nav-button.component.css',
})
export class DropdownNavButtonComponent {
  @ViewChild('myDrop', { static: false }) myDrop: NgbDropdown;
  @Input() buttonLabel: string = 'Dropdown'; // Customizable button label
  @Input() items: { label: string; route: string }[] = [];

  private timeout: number;

  onMouseEnter() {
    clearTimeout(this.timeout);
    this.myDrop.open();
  }

  onMouseLeave() {
    this.timeout = setTimeout(() => {
      this.myDrop.close();
    }, 70);
  }
}
