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

/** Template: standard page body — optional back-link, a heading, optional intro,
    and projected content. The breadcrumb lives in the site header (blue bar), so
    it's not repeated here. Rendered inside the persistent ShellComponent via the
    router outlet, so it owns only the content (not chrome). */
@Component({
  selector: 'app-page-shell',
  imports: [HeadingComponent, LinkComponent],
  styles: [`
    :host{display:block}
    .body--narrow{max-inline-size:var(--app-form-narrow)}
    .back{margin:0 0 var(--rhc-space-max-lg)}
    .intro{margin-block:var(--rhc-space-max-md) var(--rhc-space-max-2xl);max-inline-size:42rem;color:var(--rhc-color-foreground-subtle)}
  `],
  template: `
    <div [class.body--narrow]="width() === 'narrow'">
      @if (backLink()) {
        <p class="back"><app-link [to]="backLink()!">← {{ backLabel() }}</app-link></p>
      }
      <app-heading [level]="1">{{ heading() }}</app-heading>
      @if (intro()) {
        <p class="intro">{{ intro() }}</p>
      }
      <ng-content />
    </div>
  `,
})
export class PageShellComponent {
  heading = input.required<string>();
  intro = input<string>();
  backLink = input<string>();
  backLabel = input($localize`:@@pageShell.backLabel:Terug naar overzicht`);
  width = input<'default' | 'narrow'>('default');
}
