import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';

import type { MouseHighlightTarget } from '../../../core/mouse/mouse-payload.util';

@Component({
  selector: 'app-mouse-view',
  standalone: true,
  templateUrl: './mouse-view.html',
  styleUrl: './mouse-view.css',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MouseViewComponent {
  readonly targets = input.required<readonly MouseHighlightTarget[]>();

  protected readonly hasLeft = computed(() => this.targets().includes('left'));
  protected readonly hasRight = computed(() => this.targets().includes('right'));
  protected readonly hasMiddle = computed(
    () => this.targets().includes('middle') || this.targets().includes('wheel'),
  );
}
