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

/**
 * Nile side-bar-logo component.
 *
 * @tag nile-side-bar-logo
 *
 * @attr src - The image URL for the expanded (full) logo
 * @attr collapsed-src - The image URL for the collapsed (icon) logo
 */
@customElement('nile-side-bar-logo')
export class NileSideBarLogo extends NileElement {
  /**
   * Expanded logo (default full size)
   */
  @property({ type: String, attribute: true, reflect: true })
  src: string = 'https://assets.aquera.io/img/aquera-logo-blue.svg';
  /**
   * Collapsed logo (icon only)
   */
  @property({ type: String, attribute: 'collapsed-src' })
  collapsedSrc: string = 'https://assets.aqueralabs.com/img/aquera-logo-mini.png';

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

  public render(): TemplateResult {
    return html`
      <img class="logo expanded" src="${this.src}" alt="Logo" part="logo-expanded" />
      <img class="logo collapsed" src="${this.collapsedSrc}" alt="Logo icon" part="logo-collapsed" />
    `;
  }
}

export default NileSideBarLogo;

declare global {
  interface HTMLElementTagNameMap {
    'nile-side-bar-logo': NileSideBarLogo;
  }
}