<script setup lang="ts">
const props = defineProps<{
  location: 'vertical' | 'horizontal'
}>()

const bannerData = reactive({
  redirect_url: '',
  src: '',
})

async function fetchBanner() {
  try {
    const { data } = await $fetch<any>('https://users.adata.kz/api/v1/banners/active/single', {
      params: {
        location: props.location,
        page: 'details'
      },
    })
    if (data?.src) {
      bannerData.redirect_url = data.redirect_url
      bannerData.src = data.src
    }
  } catch (e) {
    console.error(e.message)
  }
}

onBeforeMount(() => {
  fetchBanner()
})
</script>

<template>
  <nuxt-link
    v-if="bannerData?.src"
    :to="bannerData.redirect_url"
    target="_blank"
  >
    <img
      class="w-full"
      :src="bannerData.src"
      alt="banner"
    >
  </nuxt-link>
</template>

<style scoped>

</style>
