import { Component, OnInit, HostListener } from '@angular/core';
import { CommonModule } from '@angular/common'; // ✅ this is what you need

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css'],
  standalone: true,
  imports: [CommonModule] // ✅ import here
})
export class NavbarComponent implements OnInit {
  dateTime: string = '';
  isMenuOpen: boolean = false;
  screenWidth: number = window.innerWidth;

  ngOnInit() {
    this.updateDateTime();
    setInterval(() => this.updateDateTime(), 1000);
  }

  updateDateTime() {
    const now = new Date();
    this.dateTime = now.toLocaleString();
  }

  @HostListener('window:resize', ['$event'])
  onResize(event: any) {
    this.screenWidth = event.target.innerWidth;
    if (this.screenWidth > 800) {
      this.isMenuOpen = false;
    }
  }

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