<script setup lang="ts">
defineEmits(['createGame', 'joinGame']);
</script>

<template>
  <v-container class="d-flex align-center justify-center fill-height">
    <v-sheet class="text-centered pa-2 w-50" rounded>
      <h1 class="text-center mb-5">Wähle aus</h1>
      <h3 class="text-center">
        Entweder erstellst du ein neues Spiel, oder du trittst einem bestehenden Spiel bei
      </h3>
      <v-divider class="mb-5 mt-5"></v-divider>
      <div class="d-flex align-center justify-space-evenly ma-4 w-100">
        <v-btn color="red" @click="$router.push('/')" rounded="xl"> Abbrechen </v-btn>
        <v-btn color="green" @click="$emit('createGame')" rounded="xl"> Erstellen </v-btn>
        <v-btn color="primary" @click="$emit('joinGame')" rounded="xl"> Beitreten </v-btn>
      </div>
    </v-sheet>
  </v-container>
</template>

<style scoped></style>
