import { Component, input } from '@angular/core';
import { HeadingComponent } from '@shared/ui/heading/heading.component';

/** Molecule: CIBG Huisstijl **Datablock** (designsystem.cibg.nl/componenten/datablock)
    — THE way to show user/application data. A grey `.data-block` surface holds a white
    `.block-wrapper` panel with a `<dl>` of projected `<app-data-row>`s. Use `stacked`
    (`.data-block--stacked`) when labels/values are long and should stack. Replaces the
    `app-card + dl` idiom for data views (the datablock carries its own surface, so it is
    NOT wrapped in an `app-card` — see WP-12). When there is no visible `heading`, pass an
    `ariaLabel` so the definition list is announced. */
@Component({
  selector: 'app-data-block',
  imports: [HeadingComponent],
  template: `
    @if (heading()) {
      <app-heading [level]="level()">{{ heading() }}</app-heading>
    }
    <div class="data-block" [class.data-block--stacked]="stacked()">
      <div class="block-wrapper">
        <dl class="mb-0" [attr.aria-label]="ariaLabel() || null">
          <ng-content />
        </dl>
      </div>
    </div>
  `,
})
export class DataBlockComponent {
  heading = input('');
  /** Heading level when `heading` is set (default h3, matching `app-card`). */
  level = input<1 | 2 | 3 | 4 | 5>(3);
  /** Stacks label above value (`.data-block--stacked`) for long content. */
  stacked = input(false);
  /** Accessible name for the `<dl>` when there is no visible heading. */
  ariaLabel = input('');
}