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

/**
 * Generic skeleton placeholder.
 *
 * Use `<app-skeleton>` while async data loads. Renders as an `animate-pulse`
 * rounded surface that respects the active theme tokens (`bg-muted`).
 *
 * - `width` / `height` accept any CSS length (e.g. `"100%"`, `"3rem"`).
 * - `rounded` toggles between `rounded-md` (default) and `rounded-full`
 *   (useful for avatar placeholders).
 * - `block` controls `display: block` vs `display: inline-block`.
 */
@Component({
  selector: 'app-skeleton',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: './skeleton.component.html'
})
export class SkeletonComponent {
  width = input<string>('100%');
  height = input<string>('1rem');
  rounded = input<'sm' | 'md' | 'lg' | 'full'>('md');
  block = input(true);

  readonly classes = computed(() => {
    const radius
      = this.rounded() === 'full' ? 'rounded-full'
        : this.rounded() === 'lg' ? 'rounded-lg'
          : this.rounded() === 'sm' ? 'rounded-sm'
            : 'rounded-md';
    const display = this.block() ? 'block' : 'inline-block';

    return `${display} ${radius} bg-muted animate-pulse`;
  });
}
