---
import {createGetStaticPaths, t} from "astro-i18n";
import {getCollection, type 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("ranking.heading", {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:load/>
</PageLayout>