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

export type SkeletonShape = 'text' | 'circle' | 'rect';

@Component({
  selector: 'app-skeleton',
  standalone: true,
  templateUrl: './skeleton.component.html',
  styleUrl: './skeleton.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {
    '[class.app-skeleton--text]': "shape() === 'text'",
    '[class.app-skeleton--circle]': "shape() === 'circle'",
    '[class.app-skeleton--rect]': "shape() === 'rect'",
    '[style.width]': 'width()',
    '[style.height]': 'height()',
    'aria-hidden': 'true'
  }
})
export class SkeletonComponent {
  readonly shape = input<SkeletonShape>('text');
  readonly width = input<string>('100%');
  readonly height = input<string | null>(null);
}
