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


/**
 * Nile side-bar-header component.
 *
 * @tag nile-side-bar-header
 *
 * @attr background - Background treatment of the header ("default" | "transparent").
 *   Defaults to "default", which paints the sidebar surface color. Set to
 *   "transparent" to drop the background so whatever sits behind the header shows
 *   through.
 */
@customElement('nile-side-bar-header')
export class NileSideBarHeader extends NileElement {

	/**
	 * Background treatment of the header. `default` keeps the sidebar surface
	 * color; `transparent` removes it.
	 */
	@property({ type: String, reflect: true, attribute: true }) background: 'default' | 'transparent' = 'default';

	/**
	 * The styles for nile-side-bar-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];
	}

	/* #endregion */

	/* #region Methods */

	/**
	 * Render method
	 * @slot This is a slot test
	 */
	public render(): TemplateResult {
		return html`
		  <div class="header-content" part="header-content">
      <slot name="logo" part="logo"></slot>
      <slot name="expand" part="expand"></slot>
    </div>
			`;
	}

	/* #endregion */
}

export default NileSideBarHeader;

declare global {
  interface HTMLElementTagNameMap {
    'nile-side-bar-header': NileSideBarHeader;
  }
}