<script setup lang="ts">
/**
 * Starter deck selection page.
 *
 * New users must select a starter deck before accessing the main app.
 * Displays 5 themed starter deck options to choose from.
 */
</script>

<template>
  <div class="flex min-h-screen items-center justify-center p-4">
    <div class="w-full max-w-4xl">
      <h1 class="mb-8 text-center text-2xl font-bold">
        Choose Your Starter Deck
      </h1>

      <p class="mb-8 text-center text-gray-600">
        Select a starter deck to begin your journey. You'll be able to earn more
        cards and build custom decks as you progress.
      </p>

      <!-- TODO: Display 5 starter deck options with previews -->
      <div class="grid grid-cols-1 gap-4 md:grid-cols-3 lg:grid-cols-5">
        <div
          v-for="i in 5"
          :key="i"
          class="cursor-pointer rounded-lg border-2 border-gray-200 p-4 text-center transition hover:border-blue-500"
        >
          <div class="mb-2 text-4xl">
            🃏
          </div>
          <div class="font-medium">
            Starter Deck {{ i }}
          </div>
          <div class="text-sm text-gray-500">
            Coming soon
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
