---
import ChoiceList from "@/components/ChoiceList.astro";
import TransitionLayout from "@/layouts/TransitionLayout.astro";
import type { GetStaticPaths } from "astro";
import type { CollectionEntry } from "astro:content";
import { getEntry } from "astro:content";
import { getCollection, render } from "astro:content";
import { getRelativeLocaleUrl } from "astro:i18n";

export const getStaticPaths = (async () => {
	const docs = await getCollection("distroGuide");

	return docs.map((doc) => {
		const [lang, ...slug] = doc.id.split("/");
		return {
			params: { lang, id: slug.join("/") || undefined },
			props: { doc },
		};
	});
}) satisfies GetStaticPaths;

const { lang } = Astro.params;
const { doc } = Astro.props;

let contentDoc: CollectionEntry<"commonPages" | "distroGuide"> = doc;

const commonPrefix = "common/";
if (doc.data.aliasOf && doc.data.aliasOf.startsWith(commonPrefix)) {
	const entry = await getEntry(
		"commonPages",
		`${lang}/${doc.data.aliasOf.substring(commonPrefix.length)}`
	);

	if (entry !== undefined) {
		contentDoc = entry;
	}
}

const strings = await getEntry("strings", lang);

const { Content } = await render(contentDoc);
---

<TransitionLayout
	title={doc.data.title + " - Move to Linux"}
	description={doc.data.description}
>
	<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">{doc.data.title}</h1>
			<Content />
			{
				doc.data.continueTo === undefined ? null : (
					<ChoiceList>
						<a
							href={getRelativeLocaleUrl(
								lang,
								doc.data.continueTo
							)}
							class="button"
						>
							{strings?.data.continue ?? "Continue"}
						</a>
					</ChoiceList>
				)
			}
		</div>
	</main>
</TransitionLayout>
