---
import { getCollection } from "astro:content";
import Layout from "../../layouts/Layout.astro";
import FAQLinks from "../../components/FAQLinks.astro";

export async function getStaticPaths() {
  const entries = await getCollection("faq");
  return entries.map((entry) => ({
    params: { slug: entry.slug },
    props: { entry }
  }));
}

const { entry } = Astro.props;
const { Content, headings } = await entry.render();
---

<Layout
  title={entry.data.title}
  description="FAQ entries for XIVLauncher & Dalamud"
>
  <main>
    <FAQLinks />

    <details>
      <summary>Table of Contents</summary>
      <nav>
        <ul>
          {
            headings
              .filter((heading) => heading.depth === 2)
              .map((heading) => (
                <li>
                  <a href={`#${heading.slug}`}>{heading.text}</a>
                </li>
              ))
          }
        </ul>
      </nav>
    </details>

    <Content />
  </main>
</Layout>
