<script setup>
    import moment from 'moment-timezone';
    import Modal from '../blocks/Modal.vue';
    import { mainStore } from '../../stores/MainStore.vue';

    import { useDark, useToggle } from "@vueuse/core";

    const isDark = useDark({selector: "body",});
    const MainStore = mainStore();

    defineProps({
        item: {
            type: Object,
            required: true
        },
        index: {
            type: Number,
            require: true
        },
    })

</script>
        
<template>
    <div class="events p-5 m-2 max-w-lg" :class="item.promo_type">
        <a href="#!"
        @click="MainStore.changeGallery(MainStore.isOpen, 0, 2, item)"
        >
            <h2 class="text-2xl pb-2 underline ad-headline">
                {{ item.title }} 
            </h2>
        </a>
        <div class="p-5">
            {{ item.short_text }}
        </div>
    </div>
</template>

<style scoped>
    .events {
    border: .1em solid #666;
    border-radius: 25px;
    min-width: 325px;
    max-width: 400px;
    }

    h2 {
        color:#000;
    }
    .Ja, .Su, .An, .Su {
        background-color: #0078bdc4;
        color: #000;
    }

    .Sp, .Ma, .Ar {
        background-color: #ff674cec;
        color: #000;
    }

    .Jo, .Re, .Fo, .Ev {
        /* background-color: #ff4d2e; */
        background-color: #00bd7e;
        color: #000;
    }


    @media (min-width: 800px) and (max-width:1023px) {
        .events {
            min-width: 300px;
            max-width: 300px;
        }
    }

    @media (min-width: 1024px) and (max-width: 1249) {
        .events {
            min-width: 300px;
            max-width: 400px;
        }
    }

    @media (min-width: 1250px) {
        .events {
            min-width: 325px;
            max-width: 475px;
        }
    }
</style>