<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 />
  </div>
</template>

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

const cardStore = useCardStore();

cardStore.fetchCollections();
/* 
cardStore.cards = [
  {
    id: 1,
    name: "Pipi",
    url: "https://images.unsplash.com/photo-1542291026-7eec264c27ff?q=80&w=2370&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  },

  {
    id: 2,
    name: "Pipi",
    url: "https://images.unsplash.com/photo-1512374382149-233c42b6a83b?q=80&w=2235&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  },

  {
    id: 3,
    name: "Pipi",
    url: "https://images.unsplash.com/photo-1539185441755-769473a23570?q=80&w=2342&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  },

  {
    id: 4,
    name: "Pipi",
    url: "https://images.unsplash.com/photo-1549298916-b41d501d3772?q=80&w=2224&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  },

  {
    id: 5,
    name: "Pipi",
    url: "https://images.unsplash.com/photo-1516478177764-9fe5bd7e9717?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  },

  {
    id: 6,
    name: "Pipi",
    url: "https://images.unsplash.com/photo-1570464197285-9949814674a7?q=80&w=2273&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  },

  {
    id: 7,
    name: "Pipi",
    url: "https://images.unsplash.com/photo-1578608712688-36b5be8823dc?q=80&w=2187&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  },

  {
    id: 8,
    name: "Pipi",
    url: "https://images.unsplash.com/photo-1505784045224-1247b2b29cf3?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  },
]; */

const activeItem = ref();

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