import { ZuiBaseElement } from '@zywave/zui-base';
import { html } from 'lit';
import { property } from 'lit/decorators.js';

/**
 * Functions as a way to create category labels for grouping similar options in `<zui-select-dropdown>`.
 * @element zui-option-group
 *
 * @slot - Default, unnamed slot; for inserting `<zui-option>` elements into a `<zui-option-group>` in order to group them under a single label
 */
export class ZuiOptionGroupElement extends ZuiBaseElement {
  /**
   * The group or category label, for selectable options
   */
  @property({ type: String, reflect: true }) label = '';

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

window.customElements.define('zui-option-group', ZuiOptionGroupElement);

declare global {
  interface HTMLElementTagNameMap {
    'zui-option-group': ZuiOptionGroupElement;
  }
}