<script setup lang="ts">
// 페이지 메타 설정
useHead({
  title: '카운터 데모',
})
</script>

<template>
  <main class="min-h-screen bg-gray-50 px-4 py-12">
    <div class="mx-auto max-w-2xl">
      <!-- 페이지 헤더 -->
      <div class="mb-10 text-center">
        <h1 class="text-3xl font-bold text-gray-900 sm:text-4xl">카운터 데모</h1>
        <p class="mt-2 text-gray-500">다양한 설정의 카운터 컴포넌트 예시입니다.</p>
      </div>

      <!-- 카운터 카드 목록 -->
      <div class="flex flex-col gap-6">
        <!-- 기본 카운터 -->
        <section class="rounded-2xl bg-white p-6 shadow-sm">
          <h2 class="mb-4 text-sm font-semibold uppercase tracking-widest text-gray-400">기본</h2>
          <Counter label="기본 카운터" />
        </section>

        <!-- 수량 선택 -->
        <section class="rounded-2xl bg-white p-6 shadow-sm">
          <h2 class="mb-4 text-sm font-semibold uppercase tracking-widest text-gray-400">수량 선택</h2>
          <Counter
            label="장바구니 수량"
            :initial-count="1"
            :min="1"
            :max="10"
          />
        </section>

        <!-- 점수판 -->
        <section class="rounded-2xl bg-white p-6 shadow-sm">
          <h2 class="mb-4 text-sm font-semibold uppercase tracking-widest text-gray-400">점수판</h2>
          <div class="flex flex-col gap-4 sm:flex-row sm:justify-center">
            <Counter label="팀 A" :min="0" :max="99" />
            <Counter label="팀 B" :min="0" :max="99" />
          </div>
        </section>
      </div>
    </div>
  </main>
</template>
