---
import TransitionLayout from "@/layouts/TransitionLayout.astro";
import { getChoices, mapStaticPaths, type Dialog } from "@/lib/tinyvn";
import type { GetStaticPaths } from "astro";
import dialogs from "@/data/fedora";

export const getStaticPaths = (() => {
	return mapStaticPaths(dialogs);
}) satisfies GetStaticPaths;

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

<TransitionLayout>
	<main class="fill-screen-center" transition:animate="fade">
		<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="max-h-[60vh] grid md:grid-flow-col md:auto-cols-fr gap-2"
				set:html={getChoices(choices, "fedora", index)}
			/>
		</div>
	</main>
</TransitionLayout>

<style>
	body {
		overflow-x: hidden;
		overflow-y: auto;
	}
</style>
