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

@customElement('iu-list')
export class List extends LitElement {
  static override styles = css`
    :host {
      display: block;
      margin-bottom: var(--iu-spacing-block);
    }
  `;

  @property({type: Number}) sm: number = 2;
  @property({type: Number}) md?: number;
  @property({type: Number}) lg?: number;
  @property({type: Number}) xl?: number;
  @property({type: Boolean, reflect: true}) nested: boolean = false;

  override render() {
    return html`
      <iu-container
        ?nested=${this.nested}
        columns=${this.sm}
        columns-md=${this.md || nothing}
        columns-lg=${this.lg || nothing}
        columns-xl=${this.xl || nothing}
      >
        <slot></slot>
      </iu-container>  
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'iu-list': List;
  }
}