<template>
  <div v-if="loading">Loading...</div>
  <CardView v-else :cards="cardStore.cards" @empty-list="showResults" />
</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>
