<script setup lang="ts">
import { POSITIONS, LANE_IMAGES, POSITIONS_STR } from '~/utils/cdragon';

const {data: stats}: {data: Ref<{patch: number, count: number}>} = await useFetch("/api/stats")
</script>

<template>
    <Head>
        <Title>Home</Title>
    </Head>

    <Logo id="index-logo"/>

    <div class="index-main-content">

    <div class="index-tierlist-info-container">
        <div id="index-tierlists">
        <h2 style="font-size: 3.4rem; margin-bottom: 10px;">Tierlist</h2>
            <NuxtLink style="margin-top: 5px; margin-bottom: 5px;" v-for="(pos, i) in POSITIONS" :to="'/tierlist/' + pos">
            <div style="display: flex; align-items: center;">
                <img width="40" height="40" :src="LANE_IMAGES[i]" />
                <h3 style="font-size: 2.1rem; font-weight: 200; margin-left: 10px;">{{ POSITIONS_STR[i] }}</h3>
            </div>
            </NuxtLink>
        </div>
        <div style="margin: auto; margin-left: 50px; margin-top: 50px; width: fit-content; max-width: 300px;">
            <h3 id="index-statp" style="font-size: 30px; font-weight: 200;">
                BuildPath analyzed {{ stats.count }} games from challenger players on patch {{ stats.patch }}
            </h3>
            
        </div>
    </div>
    
    <ChampionSelector class="index-champion-selector"/>

    </div>
</template>

<style>
#index-logo {
    margin: auto; 
    margin-top: 64px; 
    margin-bottom: 64px;
}
.index-main-content {
    display: flex; 
    margin-top: 104px;
}
.index-champion-selector {
    width: 80%;
}
.index-tierlist-info-container {
    margin: auto; 
    margin-top: 0px; 
    width: fit-content;
}
#index-tierlists {
    margin: auto; 
    margin-top: 10px; 
    width: fit-content;
}
@media only screen and (max-width: 1240px) {
    .index-main-content {
        flex-direction: column;
        margin-top: 5px;
    }
    .index-champion-selector {
        width: 100%;
    }
    .index-tierlist-info-container {
        display: flex;
        margin-bottom: 50px;
    }
}

@media only screen and (max-width: 500px) {
    #index-logo {
        margin-top: 10px;
        margin-bottom: 10px;
    }
    #index-statp {
        display: none;
    }
    .index-tierlist-info-container {
        margin-bottom: 10px;
        margin-left: 10px;

        display: none;
    }
}

</style>
