<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())

    import { useDark, useToggle } from "@vueuse/core";
    const isDark = useDark({selector: "body",});

</script>

<template>
    <div
        v-show="isOpen"
        :class="{ isDark: isDark}"
        class="
            overflow-auto scrolling-touch left-0 top-0 bottom-0 right-0 w-full h-full fixed
            overscroll-auto
            flex
            z-40
        "
        >
        <div class="container p-6 rounded-md promo-overlay" :class="{ isDark: isDark}">
            <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 v-if="modal === 0" class="p-2 template z-40 justify-items-center" :class="{ isDark: isDark}">
                <About class="" />
            </div>

            <div v-if="modal === 2" class="p-10 template z-40" :class="{isDark: isDark }">
                <a class="text-lg underline font-bold" :href="promo[0].target_link">
                    <img class="rounded-full max-w-full m-auto p-5" :src="promo[0].overlay_image"/>
                    <br/>
                    <h2 class="text-xl m-auto">
                        {{ promo[0].title }}
                    </h2>
                    <p class="text-xs  m-auto">
                        {{ promo[0].target_link }}
                    </p>
                </a>
                <!-- <p>
                    {{  promo[0].promo_type }}
                </p> -->
                <div class="p-5 m-auto" v-html="promo[0].long_text" />
            </div>
            
        </div>
       
    </div>
    
</template>

<style scoped>
.template {
    background-color: #fff;
}

#qrcode {
    width: 25em;
    margin: auto;
}
.promo-overlay {
    background-size: cover;    
}

.isDark {
    background-color: #000;
    color: #fff;
}
div >>> p {
    padding:.5rem;
}
</style>
