import {
  ChangeDetectionStrategy,
  Component,
  computed,
  input
} from '@angular/core';
import { SkeletonComponent } from './skeleton.component';

/**
 * Skeleton placeholder for chat-message-list rows. Mimics the avatar +
 * author + multi-line body so first-paint of a channel does not jump.
 */
@Component({
  selector: 'app-skeleton-message',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [SkeletonComponent],
  templateUrl: './skeleton-message.component.html'
})
export class SkeletonMessageComponent {
  rows = input<number>(5);

  readonly placeholders = computed(() => Array.from({ length: Math.max(0, this.rows()) }));
}
