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

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

@customElement('iu-page-card')

export class PageCard extends LitElement {

  static override styles = css`
    :host{
      display: block;
    }
    a{
      text-decoration: none;
      color: var(--iu-color-black);
    }
    p{
      padding-right: var(--iu-spacing-2);
      font: var(--iu-f-xl);
      margin-bottom: var(--iu-spacing-2);
      margin-top: 0;
    }
    .img{
      position: relative;
      margin-bottom: 1.125rem;
      aspect-ratio: 3 / 2;
    }
    .img img{
      width: 100%;
      height: 100%;
      object-cover: cover;
    }
  `;

  @property() href : string = '';
  @property() heading : string = '';
  @property() img? : string = '';
  
  override render() {
    return html`
        <a href="${this.href}" class="page-card">
            <p>${this.heading}</p>
            <div class="img">
                ${this.img && html`<img src="${this.img}">`}
            </div>
        </a>
    `;
  }

}

declare global {
  interface HTMLElementTagNameMap {
    'iu-page-card': PageCard;
  }
}