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);
}