import { ZuiBaseElement } from '@zywave/zui-base';
import { html } from 'lit';
import { style } from './zui-picker-item-css.js';
import '@zywave/zui-button';

/**
 * Individual items that are passed into `<zui-picker>` to be selected.
 * @element zui-picker-item
 *
 * @cssprop [--zui-picker-item-font-size=inherit] - If necessary, this property exists for font size control, by default it should `inherit` successfully
 *
 * @slot - Unnamed slot, for content such as title or a small icon
 */
export class ZuiPickerItem extends ZuiBaseElement {
  static get styles() {
    return [super.styles, style];
  }

  render() {
    return html` <div class="content"><slot></slot></div> `;
  }
}

window.customElements.define('zui-picker-item', ZuiPickerItem);

declare global {
  interface HTMLElementTagNameMap {
    'zui-picker-item': ZuiPickerItem;
  }
}