"use client";

import { useEffect } from "react";

/**
 * Blog article bodies embed a real, hand-authored Table of Contents
 * (`<div class="table-content">`) whose links call `onclick="scrollTodiv('1')"`
 * — a global JS function the live site defines, scrolling to the matching
 * `<h3 id="1">` section heading (the `id`s are real, already in the CMS
 * content). This app has no `scrollTodiv` anywhere, so those links were
 * silent no-ops. Defining it on `window` here is enough to make the
 * existing inline `onclick` attributes actually work — no need to touch the
 * raw HTML itself, same reasoning as `FaqAccordion`/`DraftTabs` attaching
 * real behavior to CMS markup this app doesn't control the markup of.
 */
export function BlogTocScroll() {
  useEffect(() => {
    (window as unknown as { scrollTodiv?: (id: string) => void }).scrollTodiv = (id: string) => {
      document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
    };
    return () => {
      delete (window as unknown as { scrollTodiv?: (id: string) => void }).scrollTodiv;
    };
  }, []);

  return null;
}