<template>
  <section>
    <h2 class="text-xl font-semibold mb-4">Где вы хотите разместить QR-код?</h2>
    <p class="text-gray-600 mb-4">Этот выбор поможет настроить QR-код с подходящими действиями.</p>
    <div class="flex flex-col gap-3 mb-4">
      <div v-for="(label, type) in qrCodePlacements" :key="type" class="flex items-center gap-2">
        <RadioButton
          v-model="selectedPlacement"
          :inputId="type"
          name="placement"
          :value="type"
          @change="next"
        />
        <label :for="type">{{ label }}</label>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
const qrCodePlacements = {
  car: 'Автомобиль',
  pet: 'Питомец',
  door: 'Входная дверь дома или квартиры',
  store: 'Магазин',
  restaurant_table: 'Стол в кафе или ресторане',
  other: 'Другое',
}

const selectedPlacement = defineModel<string>()

const emit = defineEmits(['nextStep'])

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