<script setup lang="ts">
/**
 * Play menu page.
 *
 * Game mode selection - start a new game, view active games,
 * or access campaign mode.
 */
</script>

<template>
  <div class="p-4 md:p-6">
    <h1 class="mb-6 text-2xl font-bold">
      Play
    </h1>

    <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
      <!-- Quick Play -->
      <div class="rounded-lg border p-6">
        <h2 class="mb-2 text-lg font-semibold">
          Quick Play
        </h2>
        <p class="mb-4 text-sm text-gray-600">
          Start a match against another player
        </p>
        <button
          class="w-full rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
          disabled
        >
          Coming Soon
        </button>
      </div>

      <!-- Campaign -->
      <div class="rounded-lg border p-6">
        <h2 class="mb-2 text-lg font-semibold">
          Campaign
        </h2>
        <p class="mb-4 text-sm text-gray-600">
          Challenge NPCs and earn medals
        </p>
        <router-link
          to="/campaign"
          class="block w-full rounded bg-green-600 px-4 py-2 text-center text-white hover:bg-green-700"
        >
          Enter Campaign
        </router-link>
      </div>

      <!-- Active Games -->
      <div class="rounded-lg border p-6">
        <h2 class="mb-2 text-lg font-semibold">
          Active Games
        </h2>
        <p class="mb-4 text-sm text-gray-600">
          Resume your ongoing matches
        </p>
        <div class="text-sm text-gray-500">
          No active games
        </div>
      </div>
    </div>
  </div>
</template>
