/**
 * Copyright Aquera Inc 2023
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.
 */

import { LitElement, html, CSSResultArray, TemplateResult } from 'lit';
import { customElement, property, query } from 'lit/decorators.js';
import { styles } from './nile-page-header.css';
import NileElement from '../internal/nile-element';

/**
 * Nile page-header component.
 *
 * @tag nile-page-header
 *
 */
@customElement('nile-page-header')
export class NilePageHeader extends NileElement {
  /**
   * The styles for nile-page-header
   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
   */
  public static get styles(): CSSResultArray {
    return [styles];
  }

  @property({ reflect: true, attribute: 'heading' }) heading = '';

  @property({ reflect: true, attribute: 'sub-heading' }) subHeading = '';

  /* #endregion */

  /* #region Methods */

  /**
   * Render method
   * @slot This is a slot test
   */
  public render(): TemplateResult {
    return html`<slot class="header">
      <slot
        name="header__heading"
        class="header__heading"
        part="header__heading"
        ?hidden="${!this.heading}"
      >
        ${this.heading}
      </slot>
      <slot
        name="header__subheading"
        class="header__subheading"
        part="header__subheading"
        ?hidden="${!this.subHeading}"
      >
        ${this.subHeading}
      </slot>
    </slot>`;
  }

  /* #endregion */
}

export default NilePageHeader;

declare global {
  interface HTMLElementTagNameMap {
    'nile-page-header': NilePageHeader;
  }
}