import {LitElement, html} from "lit";
import {customElement} from "lit/decorators.js";
import {Subscriber} from "@supersoniks/concorde/mixins";
import {unsafeHTML} from "lit/directives/unsafe-html.js";
const tagName = "sonic-value"; // For Astro.build
@customElement(tagName)
export class SonicValue extends Subscriber(LitElement) {
  connectedCallback(): void {
    this.setAttribute("subDataProvider", this.getAttribute("key"));
    super.connectedCallback();
  }
  render() {
    if (typeof this.props === "object" || this.props === undefined)
      return html`<slot name="prefix"></slot><slot></slot><slot name="suffix"></slot>`;
    return html`${unsafeHTML(this.props.toString())}<slot name="prefix"></slot><slot></slot
      ><slot name="suffix"></slot>`;
  }
}