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

@customElement('iu-list-item')

export class ListItem extends LitElement {
  static override styles = css`
    :host{
        display:block;
    }
    div{
        border-top: 1px solid var(--iu-color-grey-200);
    }
    p{
        margin: 0;
    }
    .label{
        padding-top: var(--iu-spacing-0);
        color: var(--iu-color-grey-300);
    }
    .text a{
      color: var(--iu-color-black);
    }
    @media ${unsafeCSS(breakpoints.md)} {
    }
  `;

  @property() label = '';
  @property() text = '';

  override render() {
    return html`
        <div>
            <p class="label">${this.label}</p>
            <p class="text">${unsafeHTML(this.text)}</p>
        </div>
    `;
  }

}

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