/**
 * @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-contacts-cards')

export class ContactsCards extends LitElement {
  static override styles = css`
    :host{
      display: block;
      margin-bottom: var(--iu-spacing-block-sm);
    }
    iu-paragraph{
      margin-bottom: var(--iu-spacing-1);
    }
    iu-paragraph p{
      font-weight: bold;
    }
    iu-container{
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: var(--iu-grid-gutter);
    }
    ::slotted(iu-contact-card){
      grid-column: span 12 / span 12;
    }
    @media ${unsafeCSS(breakpoints.md)} {
      ::slotted(iu-contact-card){
        grid-column: span 6 / span 6;
      }
      ::slotted(.span-2){
        grid-column: span 12 / span 12;
      }
    }
    @media ${unsafeCSS(breakpoints.lg)} {
      ::slotted(iu-contact-card){
        grid-column: span 4 / span 4;
      }
      ::slotted(.span-2){
        grid-column: span 6 / span 6;
      }
    }
    @media ${unsafeCSS(breakpoints.xl)} {
      ::slotted(iu-contact-card){
        grid-column: span 3 / span 3;
      }
    }
    iu-heading{
      --iu-heading-link-color: var(--iu-color-yellow-400);
    }
  `; 
  
  @property() heading? = '';

  override render() {
    return html`
        ${this.heading && html`<iu-paragraph><p>${this.heading}</p></iu-paragraph>`}
        <iu-container>
          <slot></slot>
        </iu-container>
    `;
  }

}

declare global {
  interface HTMLElementTagNameMap {
    'iu-contacts-cards': ContactsCards;
  }
}