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

import { BadgeConfig } from "../components/badge";

@Component({
  selector: "title-and-section",
  template: `
    <div [ngClass]="badgeOptions?.attached ? 'sam-ui segment' : ''">
      <h1 *ngIf="title || section" class="sam-ui header" [attr.id]="id">
        <sam-badge [options]="badgeOptions" *ngIf="badge"
          >{{ badge }}
        </sam-badge>
        <div class="sup header">
          {{ section }}
        </div>
        {{ title }}
      </h1>
      <div *ngIf="typeLabel">
        <h4>
          {{ typeLabel }}: <span *ngIf="type">{{ type }}</span>
        </h4>
      </div>
      <div *ngIf="caption" [innerHTML]="caption"></div>
    </div>
  `,
  standalone: false,
})
export class TitleAndSectionComponent {
  /**
   * Sets the section text
   */
  @Input() public section: string;
  /**
   * Sets the title text
   */
  @Input() public title: string;
  /**
   * Sets the id attribute value
   */
  @Input() public id: string;
  /**
   * Sets the badge text
   */
  @Input() public badge: string;
  /**
   * Sets the type text
   */
  @Input() public type: string;
  /**
   * Sets the type label text
   */
  @Input() public typeLabel: string;
  /**
   * Sets the caption text
   */
  @Input() public caption: string;
  /**
   * Sets the badge component options
   */
  @Input() public badgeOptions: BadgeConfig = {};
}