---
// Hyvor Talk comments component
interface Props {
  pageId?: string;
}

const { pageId } = Astro.props;
const computedPageId = pageId ?? Astro.url.pathname;
---

<div class="hyvor-comments">
  <script is:inline async src="https://talk.hyvor.com/embed/embed.js" type="module"></script>
  <hyvor-talk-comments
    website-id="15040"
    page-id={computedPageId}
    reactions-text=""
    reactions-enabled="true"
  ></hyvor-talk-comments>
</div>

<script is:inline>
  // Prevent hydration errors by ensuring Hyvor only initializes once
  if (typeof window !== 'undefined') {
    window.HYVOR_TALK_CONFIG = window.HYVOR_TALK_CONFIG || {};
  }
  
  // Hide the "What's your reaction?" text after Hyvor loads
  function hideReactionText() {
    document.querySelectorAll('.reactions-title').forEach(el => {
      el.style.display = 'none';
    });
  }
  
  // Run multiple times after Hyvor loads
  [500, 1000, 2000, 3000].forEach(delay => {
    setTimeout(hideReactionText, delay);
  });
</script>

<style is:inline>
  /* Hide the "What's your reaction?" text but keep the emojis */
  .reactions-title,
  .hyvor-comments .reactions-title,
  .hyvor-comments .hyvor-talk-reactions-heading,
  .hyvor-comments [class*="reactions-heading"],
  .hyvor-comments .ht-reactions-title,
  .hyvor-comments .ht-rating-heading,
  .hyvor-comments hyvor-talk-reactions [slot="heading"],
  .hyvor-comments .ht-reactions-header,
  .hyvor-comments .ht-reactions-section-title,
  .ht-reactions-title,
  .ht-rating-heading,
  [class*="ht-reactions"] > [class*="title"],
  [class*="ht-reactions"] > [class*="heading"],
  .hyvor-talk-reactions-header,
  .hyvor-talk-reactions-title {
    display: none !important;
  }
</style>