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

import 'vue3-carousel/carousel.css'
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'

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

  MenuStore.fetchSocialImages();
  const social_images = computed(() => {
    return MenuStore.social_images;
  });

const config = {
  height: 300,
  itemsToShow: 1,
  gap: 1,
}
</script>

<template>
    <Carousel v-bind="config" style="width:45em;">
        <Slide v-for="image in social_images" :key="image.id" class="align-middle">
            <a :href="'https://bsky.app/profile/' + image.handle + '/post/' + image.uri">
                <img :src="image.img_link" alt="image" />
            </a>
        </Slide>

        <template #addons>
        <Navigation />
        <Pagination />
        </template>
    </Carousel>
</template>

<style>
:root {
  background-color: #242424;
}

.carousel {
  --vc-pgn-background-color: rgba(255, 255, 255, 0.7);
  --vc-pgn-active-color: rgba(255, 255, 255, 1);
  --vc-nav-background: rgba(255, 255, 255, 0.7);
  --vc-nav-border-radius: 100%;
}

/* .carousel__viewport {
    height: 100%;
    overflow: hidden;
    width: 100%;
    vertical-align: middle;
} */

/* .carousel__slide {
    align-items: center;
    display: block;
    flex-shrink: 0;
    justify-content: center;
    margin: .75em;
    transform: translateZ(0);
} */

img {
  border-radius: 8px;
  width: 300px;
  object-fit: cover;
}
</style>

