<template>
  <div v-if="loading">Loading...</div>
  <div v-else class="grid min-h-screen place-items-center">
    <CardView :cards="cardStore.cards" @empty-list="showResults" />
  </div>
</template>

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

const route = useRoute();
const collection: string = route.query.collection as string;
const cardStore = useCardStore();
const loading = ref(true);

onMounted(async () => {
  cardStore.fetchCardsByCollection(collection);
  loading.value = false;
});

const showResults = () => {
  navigateTo("result");
};
</script>
