<script setup lang="ts">
defineProps<{
    title: string
    tier: Array<{champion: Champion, lane: LaneData}>
}>()
</script>

<template>
<div style="display: flex;">
    <h2 class="tierlist-tier-title">{{ title }}</h2>
    <div class="tierlist-tier-container">
        <NuxtLink v-for="{champion: champion} in tier" :to="'/champion/' + champion.alias.toLowerCase()">
        <div class="champion-img-container">
        <NuxtImg class="champion-img" :src="CDRAGON_BASE + mapPath(champion.squarePortraitPath)" :alt="champion.name"/>
        </div>
        </NuxtLink>
    </div>
</div>
</template>

<style>
.tierlist-tier-container {
    width: 90%;
    min-height: 122px;

    display: grid;
    grid-template-columns: repeat(auto-fit, 128px);
    grid-gap: 10px;

    align-items: center;

    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}
.tierlist-tier-title {
    font-size: 3.3rem;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 40px;
    
    font-weight: 300;
}

.champion-img-container {
    overflow: hidden; width: 120px; height: 120px;
    border: 1px solid var(--color-surface);
}
.champion-img-container:hover {
    border: 1px solid var(--color-on-surface);
}
.champion-img {
    width: 116px;
    height: 116px;
    transform: translate(4px, 4px) scale(1.2, 1.2);

    user-select: none;
}
@media only screen and (max-width: 450px) {
    .champion-img-container {
        width: 80px; 
        height: 80px;
    }
    .champion-img {
        width: 76px;
        height: 76px;
    }
    .tierlist-tier-container {
        grid-template-columns: repeat(auto-fit, 80px);
        min-height: 82px;
    }
}
</style>