---
import { getCollection } from "astro:content";
import * as fs from "node:fs";
import * as path from "node:path";

import SinglePage from "../../layouts/SinglePage.astro";
import Header from "../../components/Header.astro";
import Hero from "../../components/Hero.astro";
import AboutSection from "../../components/AboutSection.astro";
import SpecSection from "../../components/SpecSection.astro";
import FAQSection from "../../components/FAQSection.astro";
import Footer from "../../components/Footer.astro";
import { parseSpecContent } from "../../utils/parseSpecContent";
import { config } from "../../config";

export async function getStaticPaths() {
  const specs = await getCollection("spec");
  return specs.map((spec) => ({
    params: { version: spec.data.version },
    props: { spec },
  }));
}

const { spec } = Astro.props;
const version = spec.data.version;

// Read the markdown file
const filePath = path.join(process.cwd(), "src/content/spec", `${version}.md`);
const content = fs.readFileSync(filePath, "utf-8");

// Remove frontmatter
const markdown = content.replace(/^---[\s\S]*?---\n/, "");

// Parse the content into sections (handles markdown -> HTML internally)
const parsed = await parseSpecContent(markdown, version);
---

<SinglePage title={spec.data.title} version={version}>
  <Header version={version} />

  <main>
    <Hero version={version} svgPath={parsed.svgPath} />

    <AboutSection
      introduction={parsed.introduction}
      summary={parsed.summary}
      license={parsed.license}
    />

    <SpecSection
      terminology={parsed.terminology}
      terminologyTitle={parsed.terminologyTitle}
      specification={parsed.specification}
      tocItems={parsed.tocItems}
    />

    <FAQSection items={parsed.faq} />
  </main>

  <Footer />
</SinglePage>