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

/** Molecule: one section of a CIBG Huisstijl "controlestap" (wizard review step) —
    a heading with a "Wijzigen" link, and the section's `<app-data-row>`s in a
    `.data-block > .block-wrapper > dl.row`. Domain-free; the caller supplies the
    heading and decides what "Wijzigen" does (typically jump back to a step). */
@Component({
  selector: 'app-review-section',
  template: `
    <div class="d-flex">
      <h2>{{ heading() }}</h2>
      @if (showEdit()) {
        <div class="ms-auto">
          <a href="#" [attr.aria-label]="editAriaLabel() || editLabel()" (click)="onEdit($event)">{{ editLabel() }}</a>
        </div>
      }
    </div>
    <div class="data-block">
      <div class="block-wrapper">
        <dl class="row mb-0">
          <ng-content />
        </dl>
      </div>
    </div>
  `,
})
export class ReviewSectionComponent {
  heading = input.required<string>();
  editLabel = input($localize`:@@reviewSection.wijzigen:Wijzigen`);
  editAriaLabel = input('');
  showEdit = input(true);

  edit = output<void>();

  protected onEdit(ev: Event) {
    ev.preventDefault(); // fragment href resolves against <base href>, not the route
    this.edit.emit();
  }
}