import {LitElement, html, css} from 'lit';
import {customElement, property} from 'lit/decorators.js';
// @ts-ignore: TS2307
// import styles from './spw-lit-icon.scss';

@customElement('spw-lit-icon')
export class SpwLitIcon extends LitElement {
  static styles = css`
    :host {
      box-sizing: border-box;
      -webkit-text-size-adjust: 100%;
      font-size: 100%;

      *,
      *::before,
      *::after {
        box-sizing: inherit;
        font-family: 'Nunito Sans';
      }
      line-height: 1;
    }

    @font-face {
      font-family: 'Font Awesome';
      font-style: normal;
      font-weight: 400;
      font-display: block;
      src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/webfonts/fa-regular-400.woff2)
        format('woff2');
    }

    .spw-icon,
    .spw-icon:before {
      font-family: 'Font Awesome';
    }

    .spw-icon {
      font-size: inherit;
    }
  `;

  @property({type: String}) icon = '';

  render() {
    const iconClassName = `spw-icon fa-solid ${this.icon}`;
    return html`<i class="${iconClassName}"></i>`;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'spw-lit-icon': SpwLitIcon;
  }
}