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

export type StatusBadgeVariant = 'success' | 'warning' | 'danger' | 'info' | 'neutral' | 'primary' | 'secondary';
export type StatusBadgeSize = 'small' | 'medium' | 'large';
export type StatusBadgeShape = 'rounded' | 'pill' | 'square';

@Component({
  selector: 'ui-status-badge',
  standalone: true,
  imports: [CommonModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <span [class]="badgeClasses" [attr.aria-label]="ariaLabel">
      @if (icon) {
        <span class="ui-status-badge__icon" [innerHTML]="icon"></span>
      }
      @if (dot) {
        <span class="ui-status-badge__dot"></span>
      }
      <span class="ui-status-badge__text">
        <ng-content></ng-content>
      </span>
    </span>
  `,
  styleUrl: './status-badge.component.scss'
})
export class StatusBadgeComponent {
  @Input() variant: StatusBadgeVariant = 'neutral';
  @Input() size: StatusBadgeSize = 'medium';
  @Input() shape: StatusBadgeShape = 'rounded';
  @Input() icon: string = '';
  @Input() dot: boolean = false;
  @Input() outlined: boolean = false;
  @Input() uppercase: boolean = true;
  @Input() bold: boolean = false;
  @Input() ariaLabel: string = '';
  @Input() class: string = '';

  get badgeClasses(): string {
    return [
      'ui-status-badge',
      `ui-status-badge--${this.variant}`,
      `ui-status-badge--${this.size}`,
      `ui-status-badge--${this.shape}`,
      this.outlined ? 'ui-status-badge--outlined' : '',
      this.uppercase ? 'ui-status-badge--uppercase' : '',
      this.bold ? 'ui-status-badge--bold' : '',
      this.icon ? 'ui-status-badge--with-icon' : '',
      this.dot ? 'ui-status-badge--with-dot' : '',
      this.class
    ].filter(Boolean).join(' ');
  }
}