import { BannerWidgetParams } from "@/model/widget/banner";
import { Root, createRoot } from "react-dom/client";
import QuizBanner from "./QuizBanner";

export class BannerWidget {
  root: Root | undefined;
  element = document.createElement("div");

  constructor(props: BannerWidgetParams) {
    this.element.style.setProperty("display", "none");
    document.body.appendChild(this.element);

    this.root = createRoot(this.element);

    this.render(props);
  }

  render(props: BannerWidgetParams) {
    this.root?.render(<QuizBanner {...props} onWidgetClose={() => this.destroy()} />);
  }

  destroy() {
    if (this.root) this.root.unmount();
    this.element.remove();
  }
}
