---
import {getCollection} from 'astro:content'
import {astroI18n, createGetStaticPaths} from "astro-i18n";
import PageLayout from "../layouts/PageLayout.astro";

export const getStaticPaths = createGetStaticPaths(async () => {
    let posts = await getCollection("pages");

    return posts.filter(value => value.id.split("/")[0] === astroI18n.locale).map((page) => ({
        props: { page }, params: { slug: page.slug }
    }) )
})

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


<PageLayout title={page.data.title}>
    <article>
        <h1 class="text-left">{page.data.title}</h1>
        <Content />
    </article>
</PageLayout>

<style is:global>
    article {
        p {
            @apply my-4 leading-7;
        }

        h1 {
            @apply text-4xl font-bold mt-4 text-center;
        }

        h2 {
            @apply text-3xl font-bold mt-4;
        }

        h3 {
            @apply text-2xl font-bold mt-4;
        }

        h4 {
            @apply text-xl font-bold mt-4;
        }

        a {
            @apply text-blue-500 hover:text-blue-700;
        }

        ol>li, ul>li {
            @apply ml-4;
        }

        ol {
            @apply list-decimal;
        }

        ul {
            @apply list-disc;
        }

        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;
        }
    }
</style>