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


export type LoadingVariant = 'spinner' | 'bar' | 'pulse';
export type LoadingSize = 'sm' | 'md' | 'lg';

@Component({
  selector: 'ccl-loading',
  standalone: true,
  imports: [],
  templateUrl: './loading.html',
  styleUrls: ['./loading.css']
})
export class LoadingComponent {
  @Input() variant: LoadingVariant = 'spinner';
  @Input() size: LoadingSize = 'md';
  @Input() animated: boolean = true;
  @Input() label: string = 'Loading…';

  get role(): string {
    return 'status';
  }

  get ariaLabel(): string {
    return this.label || 'Loading…';
  }

  get cssClasses(): string {
    const classes = ['ccl-loading', `ccl-loading--${this.variant}`, `ccl-loading--${this.size}`];
    
    if (!this.animated) {
      classes.push('ccl-loading--static');
    }
    
    return classes.join(' ');
  }

  get spinnerClasses(): string {
    const classes = ['ccl-loading__spinner'];
    
    if (this.animated) {
      classes.push('ccl-loading__spinner--animated');
    }
    
    return classes.join(' ');
  }

  get barClasses(): string {
    const classes = ['ccl-loading__bar'];
    
    if (this.animated) {
      classes.push('ccl-loading__bar--animated');
    }
    
    return classes.join(' ');
  }

  get pulseClasses(): string {
    const classes = ['ccl-loading__pulse'];
    
    if (this.animated) {
      classes.push('ccl-loading__pulse--animated');
    }
    
    return classes.join(' ');
  }
}