"use client";

import { createElement, useEffect } from "react";

/**
 * Loads esp-web-tools once; hosts the install button via slot.
 */
export function EspWebInstall({
  manifest,
  label,
  disabled,
}: {
  manifest: string | null;
  label: string;
  disabled?: boolean;
}) {
  useEffect(() => {
    if (document.querySelector('script[data-esp-web-tools="1"]')) return;

    const script = document.createElement("script");
    script.type = "module";
    script.src =
      "https://unpkg.com/esp-web-tools@10.1.0/dist/web/install-button.js?module";
    script.dataset.espWebTools = "1";
    document.head.appendChild(script);
  }, []);

  const activate = createElement(
    "button",
    {
      slot: "activate",
      type: "button",
      className: "cta-btn",
      disabled: Boolean(disabled || !manifest),
    },
    label
  );

  if (!manifest) {
    return activate;
  }

  return createElement(
    "esp-web-install-button",
    { manifest },
    activate
  );
}