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

/**
 * Priority label component for displaying priority indicators.
 * Supports priority levels 1 (high) and 2 (low) with custom text content.
 *
 * @example
 * ```html
 * <ui-prio-label [priority]="1">Pflicht</ui-prio-label>
 * <ui-prio-label [priority]="2">Prio 2</ui-prio-label>
 * ```
 *
 * @see https://www.figma.com/design/bK0IW6akzSjHxmMwQfVPRW/ISA-DESIGN-SYSTEM?node-id=682-2836&m=dev
 */
@Component({
  selector: 'ui-prio-label',
  template: '<ng-content></ng-content>',
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {
    '[class]': '["ui-prio-label", priorityClass()]',
    'data-what': 'prio-label',
    '[attr.data-which]': '"priority-" + priority()',
    'role': 'status',
  },
})
export class PrioLabelComponent {
  /** The priority level of the label (1 = high, 2 = low). */
  priority = input<1 | 2>(1);

  /** A computed CSS class based on the current priority. */
  priorityClass = computed(() => `ui-prio-label--${this.priority()}`);
}
