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

// CIBG-GAP EXTENSION: n/a — deliberate custom surface, not Bootstrap's `.badge`
// (whose pill padding/colour don't fit a status dot); see cibg-gaps.mdx.
/** 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>();
}