<template>
  <div class="p-6 h-full overflow-auto">
    <div v-if="game" class="space-y-4">
      <h1 class="text-4xl font-bold">{{ game.Game }}</h1>
      <div class="text-sm text-gray-400">{{ game.Genres }} - {{ game.Players }} players</div>
      <p class="text-lg">{{ game.Description }}</p>

      <div class="flex">
        <LocalImage
            v-for="(img, index) in [game.ImagePath]"
            :key="index"
            :src="img"
            :alt="img"
            :gameId="game.Id"
            class="rounded-lg border border-gray-600 max-h-48 object-cover"
        />
      </div>

      <div class="space-y-2">
        <div class="flex gap-2 mt-2">
          <button
              v-for="(link, name) in {
                Repo: game.PublicRepositoryLink
              }"
              :key="name"
              class="bg-blue-600 px-3 py-1 rounded hover:bg-blue-500"
              @click="$emit('qr', link)"
          >
            {{ name }} 🔗
          </button>
        </div>
      </div>
    </div>
    <div v-else class="text-center text-gray-500">No game selected</div>
  </div>
</template>

<script setup lang="ts">
import { models } from "../../wailsjs/go/models";
import Game = models.Game;
import LocalImage from "./LocalImage.vue";

defineProps<{
  game: Game,
}>();

defineEmits(['qr']);
</script>

<style scoped>
img {
  transition: transform 0.2s;
}
img:hover {
  transform: scale(1.05);
}
</style>
