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


/**
 * Nile divider component.
 *
 * @tag nile-divider
 *
 */
@customElement('nile-divider')
export class NileDivider extends NileElement {

	/**
	 * The styles for nile-divider
	 * @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({ type: Boolean, reflect:true }) inset = false;
	@property({ type: Boolean, reflect:true }) vertical = false;
	@property({ reflect: true }) label = '';

	/* #endregion */

	/* #region Methods */

	/**
	 * Render method
	 * @slot This is a slot test
	 */
	public render(): TemplateResult {
		return html`
		<div part="divider" class="divider ${this.vertical ? 'vertical' : 'horizontal'} ${this.inset ? 'inset' : ''}">
			<span part="dividier-label" class="background-white ${this.vertical ? 'vertical-content-padding' : 'horizontal-content-padding'}">${this.label}</span>
		</div>`;
	}

	/* #endregion */
}

export default NileDivider;

declare global {
  interface HTMLElementTagNameMap {
    'nile-divider': NileDivider;
  }
}