import { Component, Input } from "@angular/core";
import { BHPCardConfig } from "./card.config";

@Component({
  selector: "BHPCard",
  template: `
    <div class="card">
      <ng-content select=[header]></ng-content>
      <div class="card-body">
        <div [innerHTML]="generateTitle()"></div>
        <p class="card-text">
          <ng-content></ng-content>
        </p>
      </div>
      <ng-content select=[footer]></ng-content>
    </div>
    `
})
export class BHPCardComponent {
  @Input() title: string = "";
  @Input() titleTag: string = "";

  constructor(_config: BHPCardConfig) {
    Object.assign(this, _config);
  }

  generateTitle() {
    if (this.title.length > 0) {
      let tag = "h5";
      if (this.titleTag.length > 0) {
        tag = this.titleTag;
      }
      return `
       <${this.titleTag} class="card-title">
        ${this.title}
       </${this.titleTag}>`;
    }
    return "";
  }
}