---
interface Props {
  storyID: string;
  storyURL: string;
}

const { storyID, storyURL } = Astro.props;
const coralRoot = "https://coral.neeldhara.cloud";
---

<section class="container max-w-3xl py-10 md:py-12" aria-label="Comments">
  <div id="coral_thread" data-story-id={storyID} data-story-url={storyURL}></div>
</section>

<script is:inline define:vars={{ coralRoot, storyID, storyURL }}>
  (function () {
    var d = document;

    function renderCoral() {
      if (!window.Coral || !d.getElementById("coral_thread")) return;

      window.Coral.createStreamEmbed({
        id: "coral_thread",
        autoRender: true,
        rootURL: coralRoot,
        storyID: storyID,
        storyURL: storyURL,
      });
    }

    var existingScript = d.querySelector("script[data-coral-embed]");
    if (existingScript) {
      existingScript.addEventListener("load", renderCoral, { once: true });
      renderCoral();
      return;
    }

    var s = d.createElement("script");
    s.src = coralRoot + "/assets/js/embed.js";
    s.async = false;
    s.defer = true;
    s.dataset.coralEmbed = "true";
    s.onload = renderCoral;
    (d.head || d.body).appendChild(s);
  })();
</script>