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

@Component({
  tag: 'hy-menu-language-item',
  styleUrl: 'menu-language-item.scss',
  shadow: true,
})
export class SiteLanguage {
  @Prop() abbr: string;
  @Prop() isActive: boolean = false;
  @Prop() isDisabled: boolean = false;
  @Prop() isMobile: boolean = false;
  @Prop() label: string;
  @Prop() langCode: string;
  @Prop() url: string;

  render() {
    return (
      <Host
        class={{
          'is-active': this.isActive,
          'is-disabled': this.isDisabled,
          'hy-menu-language-item': true,
        }}
      >
        <a
          href={this.url}
          class={{
            'is-active': this.isActive,
            'is-disabled': this.isDisabled,
            'is-mobile': this.isMobile,
          }}
        >
          <span class={'hy-menu-language-item__label'}>{this.isMobile ? this.abbr : this.label}</span>
        </a>
      </Host>
    );
  }
}