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

export type BadgeVariant = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
export type BadgeSize = 'xs' | 'sm' | 'md' | 'lg';
export type BadgeShape = 'pill' | 'rounded' | 'square';

@Component({
  selector: 'ui-badge',
  standalone: true,
  imports: [CommonModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <span 
      class="ui-badge"
      [attr.data-variant]="variant"
      [attr.data-size]="size"
      [attr.data-shape]="shape"
      [attr.data-dot]="isDot"
      [attr.aria-label]="ariaLabel"
      [title]="title"
    >
      @if (!isDot) {
        <ng-content></ng-content>
      }
    </span>
  `,
  styleUrls: ['./badge.component.scss']
})
export class BadgeComponent {
  @Input() variant: BadgeVariant = 'default';
  @Input() size: BadgeSize = 'md';
  @Input() shape: BadgeShape = 'pill';
  @Input() isDot: boolean = false;
  @Input() ariaLabel?: string;
  @Input() title?: string;
}