/**
 * @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';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';

/**
 * An example element.
 *
 * @fires count-changed - Indicates when the count changes
 * @slot - This element has a slot
 * @csspart button - The button
 */
@customElement('iu-featured-content')

export class FeaturedContent extends LitElement {
  static override styles = css`
    :host{
      display: block;
      background: var(--iu-color-black);
      color: #fff;
      padding-top: 2.5rem /* 40px */;
      padding-bottom: 2.5rem /* 40px */;
      margin-bottom: 4.5rem;
    }
    :host iu-heading::part(title){
      color: #fff;
    }
    :host iu-heading::part(link){
      color: var(--iu-color-grey-400);
    }
    ::slotted(p){
      font-size: 1.625rem !important;
      line-height: 2.1875rem !important;
      color: #fff !important;
    }
    .img{
      aspect-ratio: 3/2;
      margin-bottom: 2rem;
      overflow: hidden;
    }
    @media ${unsafeCSS(breakpoints.md)} {
      .img{
        aspect-ratio: 2/1;
      }
    }
    @media ${unsafeCSS(breakpoints.xl)} {
      .img{
        aspect-ratio: 21/9;
      }
    }
    .img img{
      width: 100%;
    }
    .text *{
      font: var(--iu-f-md);
    }
  `;

  @property() heading = '';
  @property() link = '';
  @property() href = '';
  @property() img = '';
  @property() text? = '';
  
  override render() {
    return html`
      <iu-container>
        <iu-heading text="${this.heading}" noDivider nested href="${this.href}" size="2" link="${this.link}"></iu-heading>
        <div class="img"><img src="${this.img}" /></div>
        ${this.text && html`<div class="text">${unsafeHTML(this.text)}</div>`}
      </iu-container>
    `;
  }

}

declare global {
  interface HTMLElementTagNameMap {
    'iu-featured-content': FeaturedContent;
  }
}