import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-skeleton',
  standalone: true,
  template: `
    <div
      class="animate-pulse rounded-lg bg-slate-200 dark:bg-slate-800"
      [class]="className"
      aria-hidden="true"
    ></div>
  `,
})
export class SkeletonComponent {
  @Input() className = '';
}

@Component({
  selector: 'app-grid-skeleton',
  standalone: true,
  imports: [SkeletonComponent],
  template: `
    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
      @for (item of items; track item) {
        <div class="card p-5">
          <app-skeleton className="h-5 w-3/4" />
          <app-skeleton className="mt-4 h-4 w-1/2" />
          <div class="mt-6 flex gap-3">
            <app-skeleton className="h-8 w-20" />
            <app-skeleton className="h-8 w-20" />
          </div>
        </div>
      }
    </div>
  `,
})
export class GridSkeletonComponent {
  @Input() count = 6;

  get items(): number[] {
    return Array.from({ length: this.count }, (_, i) => i);
  }
}
