<template>
  <div class="flex min-h-screen flex-col items-center justify-center gap-5">
    <h1 class="mb-8 text-3xl font-bold">Select a collection to begin</h1>
    <ul class="w-full max-w-md space-y-4">
      <li
        v-for="collection in cardStore.collections"
        :key="collection.name"
        class="flex items-center justify-between rounded p-4 shadow"
      >
        <span class="text-lg font-bold">{{ collection.name }}</span>
        <!-- Large Play Button -->
        <Button
          icon="pi pi-play"
          rounded
          class="flex items-center justify-center bg-blue-600 text-white"
          :class="{
            '!h-32 !w-32': activeItem === collection,
            '!h-16 !w-16': activeItem !== collection,
          }"
          style="
            transition:
              width 0.3s,
              height 0.3s;
          "
          @click="play(collection.name)"
        />
      </li>
    </ul>
    <UploadView v-if="isUploadActive" />
  </div>
</template>

<script setup lang="ts">
import { useCardStore } from "~/store/Card";

const config = useRuntimeConfig();
const cardStore = useCardStore();

cardStore.fetchCollections();

const activeItem = ref();
const isUploadActive = computed(() =>
  config.public.IS_UPLOAD_ACTIVE === "true" ? true : false,
);

const play = (collection: string) => {
  navigateTo({ path: "game", query: { collection: collection } });
};
</script>
