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

/**
 * Notice component for displaying prominent notifications and alerts.
 * Supports high, medium, and low priority variants.
 *
 * @example
 * ```html
 * <ui-notice>Important message</ui-notice>
 * <ui-notice [priority]="NoticePriority.Medium">Secondary message</ui-notice>
 * <ui-notice [priority]="NoticePriority.Low">Info message</ui-notice>
 * ```
 *
 * @see https://www.figma.com/design/bK0IW6akzSjHxmMwQfVPRW/ISA-DESIGN-SYSTEM?node-id=2551-4407&m=dev
 */
@Component({
  selector: 'ui-notice',
  template: '<ng-content></ng-content>',
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {
    '[class]': '["ui-notice", priorityClass()]',
    'data-what': 'notice',
    '[attr.data-which]': '"priority-" + priority()',
    'role': 'status',
  },
})
export class NoticeComponent {
  /** The priority level of the notice (high, medium, low). */
  priority = input<NoticePriority>(NoticePriority.High);

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