<template>
  <div class="flex flex-col gap-3 mb-4">
    <div v-for="option in deliveryOptions" :key="option.method">
      <!--
      @vue-ignore

      Vue: Argument of type
      {   label: 'В браузере (push-уведомления)';   method: 'webPush'; } | {   label: 'Telegram';   method: 'telegram'; }
      is not assignable to parameter of type never
      The intersection
      {   readonly label: 'В браузере (push-уведомления)';   readonly method: 'webPush'; } & {   readonly label: 'Telegram';   readonly method: 'telegram'; }
      was reduced to never because property label has conflicting types in some constituents.
      -->
      <slot :name="option.method" v-bind="option" v-if="slots[option.method]" />
      <slot v-bind="option" v-else-if="slots.default" />
    </div>
  </div>
</template>

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

const slots = defineSlots<
  {
    [K in DeliveryOption['method']]?: (option: Extract<DeliveryOption, { method: K }>) => void
  } & {
    default?: (option: DeliveryOption) => void
  }
>()
</script>
