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

/**
 * Repeats a row-shaped skeleton `rows` times. Designed for vertical lists
 * like the channel list, member list, or DM conversations panel.
 */
@Component({
  selector: 'app-skeleton-list',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [SkeletonComponent],
  templateUrl: './skeleton-list.component.html'
})
export class SkeletonListComponent {
  rows = input<number>(6);
  rowHeight = input<string>('0.875rem');
  primaryWidth = input<string>('70%');
  showAvatar = input(true);
  avatarSize = input<string>('2rem');
  showSubtitle = input(false);

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