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

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

/**
 * Show a breadcrumb item.
 * @slot - This element has a slot
 * @csspart - brea
 */

@customElement('iu-breadcrumbs-item')

export class BreadcrumbsItem extends LitElement {
  static override styles = css`
    :host h1{
      color: var(--iu-color-black);
      margin: 0;
      font-size: inherit;
      font-weight: 400;
      font: var(--iu-f-lg);
      display: inline;
    }
    :host li{
      font: var(--iu-f-lg);
      display: inline;
    }
    :host .link a{
      color: var(--iu-color-grey-300);
      text-decoration: none;
    }
    :host .divider{
      color: var(--theme-color-black);
      margin-left: var(--iu-spacing-0);
      margin-right: var(--iu-spacing-0);
    }
  `;

  @property() href?: string;
  @property() type?: string;
  @property() text?: string;

  override render() {
    this.type == 'current' ? '' : ''
    if (this.href) {
      return html`
        <li class="link">
          <a href="${this.href}">${this.text}</a><span class="divider" aria-hidden="true">/</span>
        </li>
      `;  
    } else {
      return html`
          <li><h1 aria-current="page">${this.text}</h1></li>
      `;  
    }
  }

}

declare global {
  interface HTMLElementTagNameMap {
    'iu-breadcrumbs-item': BreadcrumbsItem;
  }
}