/**
 * @license
 * Copyright 2019 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */

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

@customElement('iu-links-list')

export class LinksList extends LitElement {
  static override styles = css`
    :host{
      display: block;
      margin-bottom: var(--iu-spacing-block);
    }
    .columns-1{
      width: 50%;
    }
    p{
      font-weight: bold;
    }
    iu-link:last-child{
      border-bottom: 1px solid var(--iu-color-grey-200);
    }
  `;

  @property() label = 'Per approfondire';
  @property({ type: Number }) columns = 1;
  @property({ type: Array }) items: Array<{ href: string; text: string }> = [];

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

}

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