import { Component, Input } from "@angular/core";

@Component({
  selector: "sam-page-title",
  template: `
    <h1
      class="sam heading flex-column"
      [attr.id]="id"
      [attr.tabindex]="tabIndex"
      [class.inverted]="inverted"
    >
      <span class="intro">{{ super }}</span>
      {{ title }}
    </h1>
    <ng-content></ng-content>
  `,
  standalone: false,
})
export class SamPageTitle {
  /**
   * Skip nav target ID, should be unique
   */
  @Input() public id = "primary-content";
  /**
   * Sets the tabindex attribute on the header tag
   */
  @Input() public tabIndex: number = 0;
  /**
   * Main text of the title
   */
  @Input() public title: string;
  /**
   * Super text of the title
   */
  @Input() public super: string;
  /**
   * If true makes text white
   */
  @Input() public inverted: boolean;
}