<template>
  <v-card v-if="!loading" density="compact" variant="outlined">
    <div class="h-[500px] overflow-y-auto no-scrollbar">
      <div v-for="item in items" class="mt-5 mb-2">
        <post-item :key="item.id" force-show-content :post="item" />
      </div>
      <div class="mt-4 mb-5 flex justify-center">
        <v-btn :text="t('seeMore')" size="small" variant="text" to="/activity" />
      </div>
    </div>
  </v-card>
  <v-card v-else density="compact" variant="outlined">
    <div class="w-full h-full flex items-center justify-center">
      <v-progress-circular indeterminate />
    </div>
  </v-card>
</template>

<script setup lang="ts">
const { t } = useI18n()
const config = useRuntimeConfig()

const items = ref<any[]>([])

const loading = ref(false)

async function load() {
  loading.value = true

  const res = await fetch(`${config.public.solarNetworkApi}/cgi/co/posts?take=5&realm=${config.public.solarRealm}`)
  const result = await res.json()

  items.value.push(...result.data)

  loading.value = false
}

onMounted(() => {
  load()
})
</script>

<style scoped>
.no-scrollbar {
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
  width: 0;
  display: none;
}
</style>