---
import {getCollection, CollectionEntry} from "astro:content";
import {astroI18n, createGetStaticPaths, t} from "astro-i18n";
import PageLayout from "@layouts/PageLayout.astro";
import LanguageWarning from "@components/LanguageWarning.astro";

export const getStaticPaths = createGetStaticPaths(async () => {
    let posts = await getCollection("rules", value => value.id.split("/")[0] === astroI18n.locale);

    const germanPosts = await getCollection("rules", entry => entry.id.split("/")[0] === "de");

    germanPosts.forEach(value => {
        if (posts.find(post => post.id.split("/")[1] === value.id.split("/")[1])) {
            return;
        } else {
            posts.push(value);
        }
    });

    return posts.map((page) => ({
        props: {page, german: page.id.split("/")[0] != astroI18n.locale}, params: {mode: page.slug.split("/")[1]},
    }));
});

interface Props {
    page: CollectionEntry<"rules">,
    german: boolean
}

const {page, german} = Astro.props;
const {Content} = await page.render();
---

<PageLayout title={t("rules.title", {mode: t(`${page.data.translationKey}.title`)})}>
    <article>
        {german && (
            <LanguageWarning/>
        )}
        <Content/>
    </article>
</PageLayout>

<style is:global>
    article {
        > * {
            all: revert;
        }

        code {
            @apply dark:text-neutral-400 text-neutral-800;
        }

        pre.astro-code {
            @apply w-fit p-4 rounded-md border-2 border-gray-600 my-4;
        }

        a {
            @apply text-neutral-800 dark:text-neutral-400 hover:underline;
        }
    }

    link-to {
        display: contents;
    }
</style>
