<template>
  <section>
    <h2 class="text-xl font-semibold mb-4">Выберите доступные действия</h2>
    <p class="text-gray-600 mb-4">Укажите, какие действия будут доступны для сканирующих QR‑код.</p>
    <p class="text-sm text-gray-500 mb-6">Вы сможете изменить эти настройки позже.</p>
    <div class="flex flex-col gap-3 mb-4">
      <div v-for="(label, action) in actionsOptions" :key="action" class="flex items-center gap-2">
        <Checkbox v-model="model" :inputId="action" :value="action" @change="next" />
        <label :for="action">{{ label }}</label>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
const emit = defineEmits(['nextStep'])
const model = defineModel()

const actionsOptions = {
  sendMessage: 'Отправить сообщение',
  viewContactInfo: 'Посмотреть ваши контактные данные',
}

function next() {
  emit('nextStep')
}
</script>
