import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatBadgeModule } from '@angular/material/badge';

/**
 * Header Bar component for the Command Hub.
 * Per spec Section 3.1: 64px tall, app title + live indicator + notification bell + settings.
 * Uses M3 top app bar pattern.
 */
@Component({
  selector: 'app-header-bar',
  standalone: true,
  imports: [MatIconModule, MatButtonModule, MatBadgeModule],
  templateUrl: './header-bar.component.html',
  styleUrl: './header-bar.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HeaderBarComponent {
  protected readonly notificationCount = signal(3);
  protected readonly isConnected = signal(true);

  // TODO: Wire up notification panel (spec Section 2: Notifications Panel)
  // TODO: Wire up settings navigation
}