import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { SkeletonFontSizes } from './skeleton.model';

@Component({
  selector: 'nj-skeleton-rectangle',
  templateUrl: './skeleton-rectangle.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [CommonModule]
})
export class SkeletonRectangleComponent {
  /**
   * @ignore
   */
  private skeletonClassName = 'nj-skeleton';

  /**
   * Rectangle skeleton height
   */
  @Input() height?: string;

  /**
   * Rectangle skeleton width
   */
  @Input() width?: string;

  /**
   * Rectangle skeleton size (based on font sizes)
   */
  @Input() size?: SkeletonFontSizes;

  constructor() {}

  /**
   * @ignore
   */
  getSkeletonSizeClass(): string {
    if (!this.size) {
      return '';
    }
    return `${this.skeletonClassName}--${this.size}`;
  }
}