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

@customElement('iu-files-list')

export class FilesList extends LitElement {
  static override styles = css`
    :host{
      display: block;
      margin-bottom: var(--iu-spacing-block-sm);
    }
    :host p{
      font-weight: bold;
    }
    ul{
      list-style-type: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 0.9375rem
    }
  `;

  @property() label = 'Download';
  @property({ type: Number }) columns = 1;
  @property({type: Boolean, reflect: true}) nested: boolean = false;
  @property({ type: Array }) items: Array<{ href: string; text: string }> = [];

  override render() {
    return html`
      <iu-container ?nested=${this.nested}>
        <div class="columns-${this.columns}">
          ${this.label && html`<p>${this.label}</p>`}
          <ul>
            ${this.items.map(
              (item) => html`
                <li><iu-button href="${item.href}" icon="download" text="${item.text}"></iu-button></li>
              `
            )}
          </ul>
        </div>
      </iu-container>
    `;
  }

}

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