<template>
  <div class="flex items-center gap-2">
    <div v-if="isLoading" class="w-5 h-5">
      <ProgressSpinner style="width: 100%; height: 100%" strokeWidth="8" fill="transparent" />
    </div>
    <RadioButton
      v-else
      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 '@hereconnect/types'
import type { DeliveryOption } from '@/constants/deliveryOptions'

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