import { Component, OnDestroy, OnInit, computed, input, signal } from '@angular/core';

/** Atom: skeleton placeholder (grey shimmer). Delay-gated so it never flashes
    on fast responses. Render `count` lines shaped roughly like the content. */
@Component({
  selector: 'app-skeleton',
  styles: [`
    :host{display:block}
    .sk{background:linear-gradient(90deg,var(--rhc-color-cool-grey-200) 25%,var(--rhc-color-cool-grey-100) 37%,var(--rhc-color-cool-grey-200) 63%);
        background-size:400% 100%;animation:sh 1.4s ease infinite;border-radius:var(--rhc-border-radius-md);
        margin-block-end:var(--rhc-space-max-lg)}
    @keyframes sh{0%{background-position:100% 0}100%{background-position:0 0}}
  `],
  template: `
    @if (visible()) {
      @for (l of lines(); track $index) {
        <div class="sk" aria-hidden="true" [style.width]="width()" [style.height]="height()"></div>
      }
    }
  `,
})
export class SkeletonComponent implements OnInit, OnDestroy {
  width = input('100%');
  height = input('1rem');
  count = input(1);
  delay = input(150);
  protected visible = signal(false);
  protected lines = computed(() => Array(this.count()).fill(0));
  private timer?: ReturnType<typeof setTimeout>;

  ngOnInit() { this.timer = setTimeout(() => this.visible.set(true), this.delay()); }
  ngOnDestroy() { clearTimeout(this.timer); }
}
