import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
import { TuiButton } from '@taiga-ui/core/components/button';

import type { StreamInfo } from '../../../core/models/api.types';

@Component({
  selector: 'app-stream-selector',
  imports: [TuiButton],
  template: `
    <div class="stream-tabs">
      @for (s of streams(); track s.stream_type) {
        <button
          tuiButton
          type="button"
          size="s"
          appearance="secondary"
          [class.stream-active]="activeType() === s.stream_type"
          (click)="typeChange.emit(s.stream_type)"
        >
          {{ s.stream_type }}
        </button>
      }
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class StreamSelectorComponent {
  readonly streams = input.required<StreamInfo[]>();
  readonly activeType = input.required<string | null>();
  readonly typeChange = output<string>();
}
