import {
  ChangeDetectionStrategy,
  Component,
  computed,
  input,
  ViewEncapsulation,
} from '@angular/core';

/**
 * A component that displays a label badge.
 * Used for tags, filters, and reward indicators.
 *
 * @example
 * ```html
 * <ui-label>Prämie</ui-label>
 * <ui-label [active]="isSelected">Selected</ui-label>
 * ```
 *
 * @see https://www.figma.com/design/bK0IW6akzSjHxmMwQfVPRW/ISA-DESIGN-SYSTEM?node-id=2806-8052&m=dev
 */
@Component({
  selector: 'ui-label',
  templateUrl: './label.component.html',
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {
    '[class]': '["ui-label", activeClass()]',
    'data-what': 'label',
    'data-which': 'label',
    'role': 'status',
  },
})
export class LabelComponent {
  /** Whether the label is active (hover/pressed state). */
  active = input<boolean>(false);

  /** A computed CSS class for the active state of the label. */
  activeClass = computed(() => (this.active() ? 'ui-label--active' : null));
}
