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

/** Atom: heading. Renders the right h1..h5; CIBG/Bootstrap styles native headings.
    Single <ng-content> captured in a template — multiple ng-content across
    @switch branches silently drops the projected content. */
@Component({
  selector: 'app-heading',
  imports: [NgTemplateOutlet],
  template: `
    <ng-template #content><ng-content /></ng-template>
    @switch (level()) {
      @case (1) { <h1><ng-container [ngTemplateOutlet]="content" /></h1> }
      @case (2) { <h2><ng-container [ngTemplateOutlet]="content" /></h2> }
      @case (3) { <h3><ng-container [ngTemplateOutlet]="content" /></h3> }
      @case (4) { <h4><ng-container [ngTemplateOutlet]="content" /></h4> }
      @default  { <h5><ng-container [ngTemplateOutlet]="content" /></h5> }
    }
  `,
})
export class HeadingComponent {
  level = input<1 | 2 | 3 | 4 | 5>(2);
}
