<script setup lang="ts">
let buttons = [
    {
        name: "Lokaler Multiplayer",
        icon: "mdi-account-switch",
        color: "red",
        componentName: "LocalMode"
    },
    {
        name: "Lokal gegen Bot",
        icon: "mdi-robot-angry-outline",
        color: "green",
    },
    {
        name: "Online Multiplayer",
        icon: "mdi-web",
        color: "blue",
    },
]
</script>

<template>
    <v-container class="fill-height d-flex justify-center align-center" fluid>
        <div class="homepage-content">
            <div class="title-section text-center">
                <h1 class="main-title">Wähle deinen</h1>
                <h1 class="main-title highlight-title">Spielmodus</h1>
            </div>

            <div class="button-section">
                <v-btn
                    v-for="button of buttons"
                    :key="button.name"
                    :color="button.color"
                    :to="{ name: button.componentName }"
                    size="x-large"
                    min-width="340"
                    rounded="xl"
                    class="mode-btn justify-start"
                    elevation="8"
                >
                    <template v-slot:prepend>
                        <div class="d-flex justify-start" style="width: 32px">
                            <v-icon :icon="button.icon" size="24"></v-icon>
                        </div>
                    </template>

                    <span class="flex-grow-1 text-center btn-label">
                        {{ button.name }}
                    </span>
                </v-btn>
            </div>
        </div>
    </v-container>
</template>

<style scoped>
.homepage-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8vh;
}

.title-section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main-title {
    font-family: "Roboto", sans-serif;
    font-size: 3rem;
    font-weight: 300;
    letter-spacing: 2px;
    line-height: 1.2;
    text-transform: uppercase;
}

.highlight-title {
    font-weight: 700;
    font-size: 3.5rem;
    color: #fdd835;
    letter-spacing: 4px;
}

.button-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.mode-btn {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mode-btn:hover {
    transform: scale(1.05);
}

.btn-label {
    font-size: 1.05rem;
}
</style>
