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

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

  import BlueSkyMini from './listings/MiniBlueskyLinks.vue';
  import BlueSkyComplete from './listings/BlueskyLinks.vue';
  MenuStore.fetchSocialLinks();
  const links = computed(() => {
    return MenuStore.social_links;
  });

  defineProps({
        limit: {
            type: Number,
            require: false
        }
    })

</script>
        
<template class="">
    <div class="p-2">
      <p class="text-xl">Recent readings:</p>
    </div>
    <div v-if="limit"  class="md:grid lg:grid">
        <span class="" v-for="(item, index) in links.slice(0,limit)">
            <BlueSkyMini :item = "item" :index = "index" />
        </span>
        <a href="/media">View All Recent Media</a>
    </div>
    <div  v-if="!limit"  class="md:grid lg:grid md:justify-center lg:justify-center">
        <p class="text-lg">from <a href="https://bsky.app/profile/dreamfreely.org">BlueSky</a> & <a href="https://www.reddit.com/user/CultureClap/">Reddit</a></p>
        <p><a href="/">Back to the Front</a></p>
        <span v-if="!limit" class="" v-for="(item, index) in links">
            <BlueSkyComplete :item = "item" :index = "index" />
        </span>
    </div>
</template>

<style scoped>

    .tcenter, th {
      text-align: center
    }

    .green {
      background-color: green; 
    }

    .yellow {
      background-color: yellow; 
    }
    
    table {
      border-collapse: separate;
    }
    
    td, p.border {
    /* background-color: #222; */
    border-collapse: separate;
    /* border-left: .1em solid #333; */
    /* border-right: .1em solid #333; */
    border-radius: 25px;
    padding: 2em;
    margin: 1em;
    }

    .social-data {
      display: block;
      /* float: right; */
      text-align: center;
      padding-right: 1em;
    }

    div > span {
      text-align: center;
      padding-right: 1em;
    }

    .link {
        border-radius: 25px;
        padding: .5rem;
        margin: .5rem;
        background-color: orange;
        color: #000;
        font-weight: bold;
    }
</style>