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

/**
 * Card-shaped skeleton for grids like the plugin store or server directory.
 */
@Component({
  selector: 'app-skeleton-card',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [SkeletonComponent],
  templateUrl: './skeleton-card.component.html'
})
export class SkeletonCardComponent {
  cards = input<number>(6);
  minColumnWidth = input<string>('16rem');

  readonly placeholders = computed(() => Array.from({ length: Math.max(0, this.cards()) }));
  readonly gridTemplate = computed(() => `repeat(auto-fill, minmax(${this.minColumnWidth()}, 1fr))`);
}
