/**
 * @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';
import { breakpoints } from '../../breakpoints';

@customElement('iu-feature-card')

export class FeatureCard extends LitElement {

    static override styles = css`
        :host{
            display: block;
        }
        .feature-card{
            aspect-ratio: 1/1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            padding: var(--iu-grid-gutter);
            text-decoration: none;
            background: var(--iu-color-black);
        }
        .feature-card img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0.65;
        }
        .feature-card p{
            position: relative;
            margin: 0;
            z-index: 10;
            color: var(--iu-color-white);
        }
        .title{
            font: var(--iu-f-4);
        }
    `;

    @property({ type: String }) href? : string;
    @property({ type: String }) heading : string = '';
    @property({ type: String }) subtitle? : string;
    @property({ type: String }) img? : string;

  
    override render() {

        return html`
            <a href="${this.href}" class="feature-card">
                <p class="title">${this.heading}</p>
                ${this.subtitle ? html`<p class="excerpt">${this.subtitle}</p>` : ''}
                ${this.img && html`<img src="${this.img}">`}
            </a>
        `;
    }

}

declare global {
  interface HTMLElementTagNameMap {
    'iu-feature-card': FeatureCard;
  }
}