<script setup lang="ts">
import type { ActivityNode } from '../types'

defineProps<{ node: ActivityNode }>()
defineEmits(['back', 'draw'])
</script>

<template>
  <div class="h-full w-full flex flex-col items-center pt-44">
    <div class="mb-20 max-w-4xl text-center">
      <div class="text-2xl text-gray-800 font-medium leading-relaxed tracking-wide">
        {{ node.description }}
      </div>
    </div>

    <!-- 抽题按钮 (大圆形) -->
    <div class="group relative">
      <button
        class="h-64 w-64 flex flex-col items-center justify-center border-4 border-blue-400 rounded-full bg-gray-200/80 text-3xl text-gray-700 font-bold shadow-xl transition-all active:scale-95 hover:scale-105"
        @click="$emit('draw')"
      >
        <span>抽题</span>
      </button>
    </div>
  </div>
</template>
