---
// Path: src/pages/lessons/[slug].astro

import { getCollection, type CollectionEntry } from "astro:content";
import LessonLayout from "../../layouts/LessonLayout.astro";

import styles from "./lessonPage.module.scss";

interface Props {
	entry: CollectionEntry<"lessons">;
}

export async function getStaticPaths() {
	const lessonEntries = await getCollection("lessons");

	return lessonEntries.map((entry: CollectionEntry<"lessons">) => ({
		params: { slug: entry.slug },
		props: { entry },
	}));
}

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

// Dynamically Import Lesson Style from the entry's frontmatter
if (entry.data.style) {
	await import(`../../styles/lessons/${entry.data.style}.scss`);
}
---

<LessonLayout pageTitle={entry.data.title}>
	<div class:list={[styles.content]} id="lesson-container">
		<Content />
	</div>
</LessonLayout>