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

/** Molecule: one key/value row in a data summary. Hand-rolled from tokens
    (CIBG has no data-summary component). Wrap several in a <dl> (see registration-summary). */
@Component({
  selector: 'app-data-row',
  styles: [`
    .item{
      display:grid;
      grid-template-columns:minmax(8rem, 14rem) 1fr;
      gap:var(--rhc-space-max-md);
      padding-block:var(--rhc-space-max-md);
      border-block-end:var(--rhc-border-width-sm) solid var(--rhc-color-border-subtle);
      margin:0;
    }
    /* drop the divider on the last row so the list ends cleanly */
    :host:last-child .item{border-block-end-style:none}
    .item-key{font-weight:var(--rhc-text-font-weight-semi-bold);margin:0}
    .item-value{margin:0}
  `],
  template: `
    <div class="item">
      <dt class="item-key">{{ key() }}</dt>
      <dd class="item-value"><ng-content>{{ value() }}</ng-content></dd>
    </div>
  `,
})
export class DataRowComponent {
  key = input.required<string>();
  value = input<string | null>('');
}
