<script setup lang="ts">
/**
 * Deck list page.
 *
 * Displays all user's decks with validation status.
 * Allows creating new decks and editing/deleting existing ones.
 */
import { useRouter } from 'vue-router'

const router = useRouter()

function createDeck() {
  router.push('/decks/new')
}
</script>

<template>
  <div class="p-4 md:p-6">
    <div class="mb-6 flex items-center justify-between">
      <h1 class="text-2xl font-bold">
        My Decks
      </h1>
      <button
        class="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
        @click="createDeck"
      >
        New Deck
      </button>
    </div>

    <!-- TODO: Fetch and display user's decks -->
    <div class="text-gray-500">
      No decks yet. Create your first deck to get started!
    </div>
  </div>
</template>
