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

export const getStaticPaths = createGetStaticPaths(async () => {
    const modes = await getCollection("modes", entry => entry.data.ranked);

    return modes.map(value => ({
        props: {
            mode: value
        },
        params: {
            gamemode: value.id
        }
    }))
});

interface Props {
    mode: CollectionEntry<"modes">
}

const { mode } = Astro.props;
---


<PageLayout title={t("ranked.title", {mode: t(`${mode.data.translationKey}.title`)})}>
    <h1 class="text-2xl mb-2">{t("ranking.heading", { mode: t(`${mode.data.translationKey}.title`) })}</h1>
    <EloTable gamemode={mode.id} client:only="svelte" />
</PageLayout>