/**
 * 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 { html, css, CSSResultArray, TemplateResult } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import NileElement from '../internal/nile-element';
import { styles } from './nile-side-bar-footer-text.css';

/**
 * Nile side-bar-footer-text component.
 *
 * @tag nile-side-bar-footer-text
 *
 * @property {string} text - The main text (e.g. user name).
 * @property {string} subtext - The sub text (e.g. organization/role).
 */
@customElement('nile-side-bar-footer-text')
export class NileSideBarFooterText extends NileElement {
  /** Main text (e.g., name) */
  @property({ type: String }) text: string = '';

  /** Sub text (e.g., org/role) */
  @property({ type: String }) subtext: string = '';

  public static get styles(): CSSResultArray {
    return [styles];
  }

  public render(): TemplateResult {
    return html`
      <div class="footer-text" part="footer-text">
        <div class="main" part="main">${this.text}</div>
        ${this.subtext
          ? html`<div class="sub" part="sub">${this.subtext}</div>`
          : null}
      </div>
    `;
  }
}

export default NileSideBarFooterText;

declare global {
  interface HTMLElementTagNameMap {
    'nile-side-bar-footer-text': NileSideBarFooterText;
  }
}