<script setup lang="ts">
import { getAuthClient } from '@/api/auth_client';
import type { Game } from '@/api/generated/crabs/evening_detective_server';
import HeaderMenu from '@/components/HeaderMenu.vue'
import { useMessage } from 'naive-ui';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const client = getAuthClient()
const message = useMessage()
const router = useRouter()

const games = ref<Game[]>([])

async function getGames() {
  games.value = []
  const res = await client.GetGames({})
  if (res.error != '') {
    message.error(res.error!)
    return
  }
  games.value = res.games || []
}
getGames()

async function toGame(id: number) {
  router.push('/games/' + id)
}
</script>

<template>
  <div class="center-block-custom">
    <div class="width1200">
      <div v-for="game in games" class="game-block" @click="toGame(game.id!)">
        <div class="game-title">
          {{ game.name }}
        </div>
        <div class="game-description">
          {{ game.description }}
        </div>
      </div>
    </div>
  </div>

  <HeaderMenu active="games" />
</template>

<style scoped>
.game-block {
  margin: 10px 0;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #444;
}

.game-block:hover {
  cursor: pointer;
  color: #63e2b7;
}

.game-title {
  font-size: 24px;
  margin-bottom: 10px;
}

.game-description {
  color: #aaa;
  margin-bottom: 10px;
}
</style>
