<template>
  <div class="flex items-center gap-2">
    <RadioButton
      v-model="model"
      :inputId="method"
      name="delivery"
      :value="method"
      @change="$emit('change', $event)"
    />
    <label :for="method">{{ label }}</label>
  </div>
</template>

<script setup lang="ts">
import type { QRCodeDocument } from '@/types/DBDocumentTypes'
import type { DeliveryOption } from '@/constants/deliveryOptions'

defineProps<{ label: DeliveryOption['label']; method: DeliveryOption['method'] }>()
defineEmits<{
  (e: 'change', value: Event): void
}>()
const model = defineModel<null | QRCodeDocument['messageDeliveryMethod']>()
</script>
