<script setup>
    import { storeToRefs } from 'pinia'
    import { mainStore } from '../../stores/MainStore.vue'
    import About from '../About.vue'
    import qrCode from '../../assets/qr.digi.png'

    const promo = mainStore().promo_display;
    
    const { isOpen, modal} = storeToRefs(mainStore())

</script>


<template>
    <div
        v-show="isOpen"
        class="
            overflow-auto scrolling-touch left-0 top-0 bottom-100 right-0 w-full h-full fixed
            overscroll-auto
            flex
            items-start
            justify-center
            mx-auto
            z-40
        "
        >
        <div class="max-w-2xl p-6 mt-10 rounded-md shadow-xl promo-overlay">
            <div class="flex items-center justify-between">
                <h3 v-show="modal" class="text-2xl">QR Code to DigiSnaxx</h3>
                <h3 v-show="!modal" class="text-2xl">About DigiSnaxx</h3>
                <svg
                    @click="isOpen = false"
                    xmlns="http://www.w3.org/2000/svg"
                    class="w-8 h-8 text-red-900 cursor-pointer"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                >
                    <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
                    />
                </svg>
            </div>

            <About v-if="modal === 0" class="z-40"/>
            
            <div v-if="modal === 1" class="p-10 template z-40">
                <img :src="qrCode"/>
                <h2 class="text-xl green p-5">Shareable QR Code</h2>
            </div>
            <div v-if="modal === 2" class="p-10 template z-40 green">
                <a class="text-lg underline font-bold" :href="promo[0].target_link">
                    <h2 class="text-xl">
                        {{ promo[0].title }}
                    </h2>
                    <p class="text-xs">
                        {{ promo[0].target_link }}
                    </p>
                    <img class="rounded-full" :src="promo[0].image"/>
                </a>
                <!-- <p>
                    {{  promo[0].promo_type }}
                </p> -->
                <div class="p-5" v-html="promo[0].long_text" />
            </div>
            
        </div>
       
    </div>
    
</template>

<style scoped>
/* .template {
    background-color: #000;
    z-index: 4;
} */
div >>> p {
    padding:.5rem;
}
</style>
