<script setup lang="ts">
let buttons = [
    {
        name: "Lokaler Multiplayer",
        icon: "mdi-account-switch",
        color: "red"
    },
    {
        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-space-evenly align-center flex-column" fluid>
        <h1>Wähle dein Spielmodi aus:</h1>
        <v-row justify="center" align="center">
            <v-col cols="12" class="text-center">
                <div v-for="button of buttons" :key="button.name" class="pa-2">
                    <v-btn :color="button.color" size="x-large" min-width="325" class="justify-start">
                        <template v-slot:prepend>
                            <div class="d-flex justify-start" style="width: 30px;">
                                <v-icon :icon="button.icon"></v-icon>
                            </div>
                        </template>

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

<style scoped></style>