import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
import { CommonModule } from '@angular/common';

export type GhostButtonSize = 'small' | 'medium' | 'large';

@Component({
  selector: 'ui-ghost-button',
  standalone: true,
  imports: [CommonModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <button
      [class]="buttonClasses"
      [disabled]="disabled || loading"
      [type]="type"
      (click)="handleClick($event)"
    >
      @if (loading) {
        <div class="ghost-button-loader">
          <div class="ghost-button-spinner"></div>
        </div>
      } @else {
        <ng-content></ng-content>
      }
    </button>
  `,
  styleUrl: './ghost-button.component.scss'
})
export class GhostButtonComponent {
  @Input() size: GhostButtonSize = 'medium';
  @Input() disabled: boolean = false;
  @Input() loading: boolean = false;
  @Input() type: 'button' | 'submit' | 'reset' = 'button';
  @Input() fullWidth: boolean = false;
  @Input() class: string = '';

  @Output() clicked = new EventEmitter<Event>();

  get buttonClasses(): string {
    return [
      'ui-ghost-button',
      `ui-ghost-button--${this.size}`,
      this.disabled ? 'ui-ghost-button--disabled' : '',
      this.loading ? 'ui-ghost-button--loading' : '',
      this.fullWidth ? 'ui-ghost-button--full-width' : '',
      this.class
    ].filter(Boolean).join(' ');
  }

  handleClick(event: Event): void {
    if (!this.disabled && !this.loading) {
      this.clicked.emit(event);
    }
  }
}