<script setup lang="ts">
import { handleElementPosition } from '#adata-ui/utils/getMaxZindex'

const props = withDefaults(
  defineProps<{
    tariff: string
    deleteFromDom?: boolean

  }>(),
  {
    tariff: '',
    deleteFromDom: false,
  },
)
const emit = defineEmits<{
  (e: 'buyTariff', num: number): void
}>()
const { t } = useI18n()

const isOpen = defineModel<boolean>({ default: false })
function confirm() {
  emit('buyTariff', props.tariff)
}
function cancel() {
  isOpen.value = false
}

if (props.deleteFromDom) {
  handleElementPosition('connecting-tariff')
}
</script>

<template>
  <a-modal
    v-model="isOpen"
    name="connecting-tariff"
    :prevent-close="true"
  >
    <div class="flex flex-col gap-5">
      <p class="heading-02 text-center">
        {{ t('modals.connecting.title') }}
      </p>
      <a-ill-turn-on-tariff class="w-full"/>
      <p class="body-400 whitespace-pre-wrap text-center">
        {{ t('modals.connecting.questions') }}
      </p>
    </div>

    <template #footer>
      <div class="flex gap-2 ">
        <a-button
          view="outline"
          block
          @click="cancel"
        >
          {{ t('modals.buttons.close') }}
        </a-button>
        <a-button block @click="confirm">
          {{ t('reuse.yes') }}
        </a-button>
      </div>
    </template>
  </a-modal>
</template>

<style scoped>

</style>
