<script setup lang="ts">
import { useAnotherDeviceModal } from '#adata-ui/composables/modalsState'
const { t, locale } = useI18n()
const localePath = useLocalePath()

const isOpen = useAnotherDeviceModal()
const { myLayer }: any = useAppConfig()

function onClose() {
  isOpen.value = false
  return navigateTo(localePath('/'))
}
</script>

<template>
  <a-modal
    v-model="isOpen"
    :title="t('modals.another_device_modal.title')"
    @close="onClose"
  >
    <div class="flex flex-col items-center justify-center gap-5">
      <a-ill-phone-check />
      <p class="body-400 text-center">
        {{ t('modals.another_device_modal.info') }}
      </p>
      <div
        class="body-400 flex gap-2 rounded-lg border border-red-500 dark:border-red-400 bg-[#FDECEB] dark:bg-red-400/10 p-4 text-red-500 dark:text-red-400"
      >
        <a-icon-warning-triangle
          class="shrink-0"
          width="24"
          height="24"
        />
        <p>
          {{ t('modals.another_device_modal.alert') }}
        </p>
      </div>
    </div>
    <template #footer>
      <div class="flex w-full gap-2">
        <a-button
          view="outline"
          class="w-full"
          @click="onClose"
        >
          {{ t('modals.buttons.close') }}
        </a-button>
        <a-button
          class="w-full"
          :to="buildLocalizedUrl(locale, myLayer.landingUrl)"
        >
          {{ t('modals.buttons.toMain') }}
        </a-button>
      </div>
    </template>
  </a-modal>
</template>

<style scoped></style>
