/**
 * EdGEL icon component.
 */

import { css, html } from 'lit'
import { EdGELElement } from '../base.js'

export class EdGELIcon extends EdGELElement {
  static properties = {
    name: { type: String },
    colour: { type: String }
  }

  static styles = css`
    :host {
      font-size: unset;
      line-height: unset;
    }
  `

  constructor() {
    super()

    this.name = ''
    this.colour = ''
  }

  render() {
    if (/^[\da-z-]+$/.test(this.name.trim())) {
      const classes = ['bi', `bi-${this.name.trim()}`]
      if (this.colour.trim()) {
        classes.push(`text-${this.colour.trim()}`)
      }

      return html`<span class=${classes.join(' ')} aria-hidden="true"></span>`
    }

    throw new Error(this.name.trim() ? 'Invalid icon name format' : 'Missing icon name required attribute')
  }
}
