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

/** Molecule: one key/value row inside a CIBG Huisstijl **Datablock** (see
    `data-block.component.ts`) — the row primitive of the datablock/`controlestap`
    data summary. Used on a `<div>` so the `<dl>`'s direct child is a native element
    (the HTML5.1 `dl > div > dt + dd` grouping), which keeps the definition list
    axe-clean — a bare custom element between `<dl>` and its `<dt>/<dd>` trips axe's
    definition-list rule regardless of `display:contents`. The host is the Bootstrap
    `.row`; `dt.col-md-4`/`dd.col-md-8` give the label/value widths. Wrap several in a
    `<dl class="mb-0">` (a `<app-data-block>`). Project custom content (e.g. a badge)
    into the `<dd>` via `<ng-content>`. */
@Component({
  selector: 'div[app-data-row]',
  host: { class: 'row' },
  // The CIBG datablock draws a separator between entries. It ships that border on
  // dt/dd with a `:last-of-type` reset, but our one-row-per-<div> grouping (for axe)
  // makes every dt/dd a last-of-type — so we carry the separator on the row instead.
  styles: [
    `
      :host:not(:last-of-type) {
        border-block-end: var(--rhc-border-width-sm) solid var(--rhc-color-cool-grey-200);
      }
    `,
  ],
  template: `
    <dt class="col-md-4">{{ key() }}</dt>
    <dd class="col-md-8">
      <ng-content>{{ value() }}</ng-content>
    </dd>
  `,
})
export class DataRowComponent {
  key = input.required<string>();
  value = input<string | null>('');
}