/**
 * 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-footer.css';
import NileElement from '../internal/nile-element';

/**
 * Nile side-bar-footer component.
 *
 * @tag nile-side-bar-footer
 *
 * @slot icon - Slot for footer icon
 * @slot text - Slot for footer text
 *
 * @attr background - Background treatment of the footer ("default" | "transparent").
 *   Defaults to "default", which paints the sidebar surface color. Set to
 *   "transparent" to drop the background so whatever sits behind the footer shows
 *   through.
 */
@customElement('nile-side-bar-footer')
export class NileSideBarFooter extends NileElement {
  /**
   * Background treatment of the footer. `default` keeps the sidebar surface
   * color; `transparent` removes it.
   */
  @property({ type: String, reflect: true, attribute: true }) background: 'default' | 'transparent' = 'default';

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

  public render(): TemplateResult {
    return html`
      <div part="base" class="footer">
      <slot> </slot>
      </div>
    `;
  }
}

export default NileSideBarFooter;

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