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

export type AuBadgeVariant = 'neutral' | 'accent' | 'success' | 'warning' | 'danger';

/**
 * Small status label. Colour is never the only signal: the text carries the meaning, and every
 * variant's text colour meets 4.5:1 on its background.
 */
@Component({
  selector: 'au-badge',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `@if (dot()) { <span class="au-badge__dot" aria-hidden="true"></span> }<ng-content />`,
  host: { class: 'au-badge', '[attr.data-variant]': 'variant()' },
  styles: `
    :host {
      --_c: var(--au-muted);
      display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.55rem; vertical-align: middle;
      border-radius: 999px; border: 1px solid color-mix(in srgb, var(--_c) 45%, transparent); background: var(--au-surface-2);
      color: var(--_c); font: 600 0.75rem/1.4 var(--au-font); white-space: nowrap;
    }
    :host([data-variant='accent']) { --_c: var(--au-accent-text); background: var(--au-accent-soft); }
    :host([data-variant='success']) { --_c: var(--au-success); }
    :host([data-variant='warning']) { --_c: var(--au-warning); }
    :host([data-variant='danger']) { --_c: var(--au-danger); }
    .au-badge__dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
  `,
})
export class AuBadge {
  readonly variant = input<AuBadgeVariant>('neutral');
  readonly dot = input(false, { transform: booleanAttribute });
}