import { Component, input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideWifiOff } from '@ng-icons/lucide';
import type { User } from '../../shared-kernel';

@Component({
  selector: 'app-private-call-participant-card',
  standalone: true,
  imports: [CommonModule, NgIcon],
  viewProviders: [provideIcons({ lucideWifiOff })],
  host: { class: 'block min-w-0' },
  templateUrl: './private-call-participant-card.component.html'
})
export class PrivateCallParticipantCardComponent {
  readonly user = input.required<User>();
  readonly connected = input.required<boolean>();
  readonly speaking = input.required<boolean>();
  readonly issueLabel = input<string | null>(null);
  readonly compact = input(false);

  avatarSize(): string {
    return this.compact() ? '5.75rem' : 'clamp(6.5rem, 38vw, 13rem)';
  }

  avatarSizeSm(): string {
    return this.compact() ? '6rem' : 'clamp(4.25rem, 22vw, 10rem)';
  }

  participantInitial(): string {
    return this.user().displayName.charAt(0).toUpperCase() || '?';
  }
}