import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';

/**
 * An nile-heading element.
 *
 * @fires count-changed - Indicates when the count changes
 * @slot - This element has a slot
 * @csspart button - The button
 */
@customElement('nile-heading')
export class NileHeading extends LitElement {
  static override styles = css`
    :host {
      display: block;
      border: solid 1px gray;
      padding: 16px 16px var(--nile-spacing-1-x) 16px;
      font-size: var(--nile-type-scale-5);
      -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
      -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
      text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
    }

    :host([size='header-1']) {
      font-size: var(--nile-type-scale-5, 18px);
      font-weight: var(--nile-font-weight-bold, 600);
    }
  `;

  /**
   * Button Lab
   */
  @property()
  name = '';
  /**
   * Text Size
   */
  @property({ type: String, reflect: true }) size = 'header-1';

  // override render() {
  //   return html` <h1 class="nds--heading">${this.name}</h1> `;
  // }

  override render() {
    return html`<slot></slot>`;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'nile-heading': NileHeading;
  }
}