---
import TransitionLayout from "@/layouts/TransitionLayout.astro";
import { getChoices, type Choice } from "@/lib/tinyvn";
import type { GetStaticPaths, GetStaticPathsItem } from "astro";
import { getCollection } from "astro:content";

export const getStaticPaths = (async () => {
	const questions = await getCollection("distroQuiz");

	return questions
		.map((langDoc) => {
			return langDoc.data.dialogs.reduce((prev, curr, index) => {
				const page: GetStaticPathsItem = {
					params: {
						lang: langDoc.id,
						index,
					},
					props: curr,
				};
				return [...prev, page];
			}, [] as GetStaticPathsItem[]);
		})
		.flat();
}) satisfies GetStaticPaths;

const { lang, index } = Astro.params;
const { title, content, choices } = Astro.props;
---

<TransitionLayout>
	<main class="fill-screen-center" transition:animate="slide">
		<div class="p-4 lg:max-w-[50vw] text-center flex flex-col gap-4">
			<h1 class="text-5xl font-bold">{title}</h1>
			<p set:html={content} />
			<div
				class="grid grid-flow-col auto-cols-fr gap-2"
				set:html={getChoices(
					choices as Choice[],
					"distroquiz",
					(index as number).toString(),
					lang as string
				)}
			/>
		</div>
	</main>
</TransitionLayout>

<style>
	body {
		overflow: hidden;
	}
</style>
