---
import type { MarkdownHeading } from "astro";
import "../styles/toc.scss";

interface Props {
  toc: boolean;
  headings: MarkdownHeading[];
}

const { toc, headings } = Astro.props;
const minDepth = Math.min(...headings.map((heading) => heading.depth));
---

{
  toc ? (
    <>
      <div class="toc-wrapper">
        <slot />
        <div class="toc">
          Table of contents
          <ul>
            {headings.map((heading) => {
              return (
                <li style={`padding-left: ${(heading.depth - minDepth) * 10}px;`}>
                  <a href={`#${heading.slug}`}>{heading.text}</a>
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    </>
  ) : (
    <slot />
  )
}

<script type="text/javascript">
  document.addEventListener("scroll", (doc, evt) => {
    console.log("SHIET");
  });
</script>