<template>
  <div class="flex w-full justify-end">
    <div class="flex flex-col" v-for="deck of decks">
      <Image
          src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/f1ea70e0-6b84-41e0-945a-9388d618e4a0/dc0ha2k-570434cb-39a2-41c8-8bc0-d6e0333a4f28.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2YxZWE3MGUwLTZiODQtNDFlMC05NDVhLTkzODhkNjE4ZTRhMFwvZGMwaGEyay01NzA0MzRjYi0zOWEyLTQxYzgtOGJjMC1kNmUwMzMzYTRmMjgucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.pUHo0NNlqIO7VPFnb-GFSzQX4e1xmI5ArXJNZBCiIwg"
          alt="Image"
          width="250"
          preview
      />
      hi! {{ deck.name}}
    </div>
  </div>
</template>

<script setup lang="ts">

import {inject, onMounted, ref, type Ref} from "vue";
import {DeckServiceKey} from "../main.ts";
import {type Deck, DeckService} from "../api/openapi";

const deckService: DeckService = inject(DeckServiceKey) as DeckService;

const decks: Ref<Deck[]> = ref([]);

onMounted(async () => {
  decks.value = (await deckService.getDecks()).data.content
})
</script>

<style scoped>

</style>