import {Component, h, Prop} from '@stencil/core';

@Component({
  tag: 'hy-list-item',
  styleUrl: 'hy-list-item.scss',
  shadow: false,
})
export class HyListItem {
  @Prop() itemType?: string;
  @Prop() itemTitle?: string;
  @Prop() itemDescription?: string;
  @Prop() url?: string;
  @Prop() isExternal: boolean = false;
  @Prop() scLabel?: string;

  render() {
    const classAttributes = ['hy-list-item'].join(' ');
    const target = this.isExternal ? '_blank' : '_self';

    return (
      <article>
        <a class={classAttributes} href={this.url} target={target} aria-label={this.scLabel}>
          <div class="hy-list-item__info-container">
            <div class="hy-list-item__info-container__header">{this.itemType}</div>
            <div class="hy-list-item__info-container__title">{this.itemTitle}</div>

            <div class="hy-list-item__info-container__link-container">
              <span class="hy-list-item__info-container__link__icon">
                <hy-icon icon={'hy-icon-link'} size={15} />
              </span>
              <div class="hy-list-item__info-container__link">{this.url}</div>
            </div>

            {this.itemDescription && (
              <div class="hy-list-item__info-container__description">{this.itemDescription}</div>
            )}
          </div>
        </a>
      </article>
    );
  }
}