import { Component, input, output } from '@angular/core';
import { DataBlockComponent } from '@shared/ui/data-block/data-block.component';

/** 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 CIBG
    Datablock (composes `<app-data-block>`). Domain-free; the caller supplies the
    heading and decides what "Wijzigen" does (typically jump back to a step). */
@Component({
  selector: 'app-review-section',
  imports: [DataBlockComponent],
  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>
    <app-data-block><ng-content /></app-data-block>
  `,
})
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();
  }
}
