/**
 * EdGEL badge component.
 */

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

export class EdGELBadge extends EdGELElement {
  static properties = {
    colour: { type: String },
    pill: { type: Boolean },
    url: { type: String }
  }

  render() {
    // If no colour has been supplied, don't render anything.
    if (!this.colour) {
      return html``
    }

    let classes = `badge text-bg-${this.colour}`
    if (this.pill) {
      classes = `${classes} rounded-pill`
    }

    if (this.url) {
      return html`
        <a href=${this.url} class=${classes}>
          <slot></slot>
        </a>
      `
    }

    return html`
      <span class=${classes}>
        <slot></slot>
      </span>
    `
  }
}
