<template>
  <div class="flex min-h-screen flex-col items-center gap-10">
    <div class="flex items-start justify-center space-x-8 p-8">
      <!-- First Grid -->
      <div class="w-1/2">
        <h2 class="mb-4 text-xl font-bold">You smashed</h2>
        <div
          class="grid grid-cols-1 gap-2 lg:grid-cols-3 xl:grid-cols-5 xl:gap-4"
        >
          <div
            v-for="card in cardStore.smashList"
            :key="card.id"
            class="flex items-center justify-center rounded p-2 shadow"
          >
            <img
              :src="card.image"
              alt="Image from Smash List"
              class="w-full rounded object-cover"
            />
          </div>
        </div>
      </div>
      <!-- Second Grid -->
      <div class="w-1/2">
        <h2 class="mb-4 text-xl font-bold">You passed</h2>
        <div
          class="grid grid-cols-1 gap-2 lg:grid-cols-3 xl:grid-cols-5 xl:gap-4"
        >
          <div
            v-for="card in cardStore.passList"
            :key="card.id"
            class="flex items-center justify-center rounded p-2 shadow"
          >
            <img
              :src="card.image"
              alt="Image from pass list"
              class="w-full rounded object-cover"
            />
          </div>
        </div>
      </div>
    </div>
    <Button label="Return" class="h-16 w-64" @click="goHome" />
  </div>
</template>

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

const cardStore = useCardStore();

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