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

/** Molecule: one key/value row inside an RHC data-summary.
    Wrap several of these in .rhc-data-summary (see registration-summary). */
@Component({
  selector: 'app-data-row',
  template: `
    <div class="rhc-data-summary__item">
      <dt class="rhc-data-summary__item-key">{{ key() }}</dt>
      <dd class="rhc-data-summary__item-value"><ng-content>{{ value() }}</ng-content></dd>
    </div>
  `,
})
export class DataRowComponent {
  key = input.required<string>();
  value = input<string | null>('');
}