﻿<script setup>
import {useSubscriptionStore} from "@/stores/subscriptionStore.js";

const subscriptionStore = useSubscriptionStore()
</script>

<template>

  <template v-if="Object.keys(subscriptionStore.subscriptions).length > 0">
    <template v-for="subscription in subscriptionStore.subscriptions">

      <RouterLink :to="`/@${subscription.creatorName}`">

        <div class="flex items-center content-center font-sans font-semibold pt-2">
          <img :src="subscription.creatorPortraitUrl"
               alt="Profile Image"
               class="rounded-full mx-2"
               width="32px"
               height="32px">

          {{ subscription.creatorName }}
        </div>

      </RouterLink>

    </template>
  </template>

  <template v-else>
    <slot>
      <span>Placeholder when there are no subscriptions</span>
    </slot>
  </template>

</template>