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

/** Atom: a coloured dot + label. Purely presentational and domain-free — the
    caller decides what colour and label mean (e.g. via registration.policy).
    This keeps the shared UI kernel free of any domain knowledge. */
@Component({
  selector: 'app-status-badge',
  // Local class is NOT Bootstrap's .badge (which would add pill padding/colour) — hence .status-badge.
  styles: [`
    .status-badge{display:inline-flex;align-items:center;gap:var(--rhc-space-max-md)}
    .dot{inline-size:0.75rem;block-size:0.75rem;border-radius:var(--rhc-border-radius-round);flex:none}
  `],
  template: `
    <span class="status-badge">
      <span class="dot" [style.background-color]="color()" aria-hidden="true"></span>
      <span>{{ label() }}</span>
    </span>
  `,
})
export class StatusBadgeComponent {
  label = input.required<string>();
  color = input.required<string>();
}
