<script setup>
  import { ref, onMounted, computed } from "vue";

  import { useMenuStore } from '../../stores/MenuStore';
  const MenuStore = useMenuStore();
  MenuStore.get_today();


  import EventListingComplete from '../listings/EventListing.vue';
  import Promo from '../listings/BlueskyLinks.vue';
  // import Promo from '../listings/Promo.vue';

  import { useEventsStore } from '../../stores/EventsStore';

  const props = defineProps({
        limit: {
            type: Number,
            require: false
        },
        
        cal: {
          type: String,
          require: true
        }
    })

  const store = useEventsStore();
  store.fetchEvents(props.cal);
  store.fetchPromo();
  const events = computed(() => {
    return store.events;
  });
  const promo = computed(() => {
    return store.promo;
  });

  

</script>
        
<template>
  <div class="md:flex md:flex-wrap lg:flex lg:flex-wrap md:flex md:justify-center lg:flex lg:justify-center z-0">
    <span class="self-stretch" v-for="(item, index) in events">
      <Promo  v-if="(index % 6 == 0) && index != 0 && events.length > 12" :item = promo[(index/6)-1] :index = "(index/6)-1"/>
      <EventListingComplete v-else-if="(index % 6 != 0)" :item = "item" :index = "index" />
      <!-- <EventListingComplete :item = "item" :index = "index" /> -->
    </span>
  </div>
</template>