---
import Breadcrumbs from '../components/Breadcrumbs.astro';
import RoadmapBanner from '../components/RoadmapBanner.astro';
import BaseLayout from '../layouts/BaseLayout.astro';
import { getTopicFiles, TopicFileType } from '../lib/topic';
import '../styles/prism.css';

export async function getStaticPaths() {
  const topicPathMapping = await getTopicFiles();

  return Object.keys(topicPathMapping).map((topicSlug) => ({
    params: { topicId: topicSlug.replace(/^\//, '') },
    props: topicPathMapping[topicSlug],
  }));
}

const { topicId } = Astro.params;
const { file, breadcrumbs, roadmapId, roadmap } = Astro.props as TopicFileType;
---

<BaseLayout title="What is this">
  <RoadmapBanner roadmapId={roadmapId} roadmap={roadmap} />
  <div class="bg-gray-50">
    <Breadcrumbs breadcrumbs={breadcrumbs} roadmapId={roadmapId} />

    <div class="container pb-16 prose prose-p:mt-0 prose-h1:mb-4 prose-h2:mb-3 prose-h2:mt-0">
      <main id="main-content">
        <file.Content />
      </main>
    </div>
  </div>
</BaseLayout>