<script setup lang="ts">
import { useMarketingStaticsQuery } from "~/queries/marketing";

const tabsQuery = useMarketingStaticsQuery();
const tabs = computed(() => tabsQuery.data.value || []);
const isPending = computed(() => tabsQuery.isPending.value);
</script>
<template>
  <section class="social-media py-section bg-gradient-even">
    <div class="container mx-auto px-4">
      <SectionHeadline :title="$t('socialMedia.statusTitle')" />
      <SkeletonsSocialMediaStaticsSkeleton v-if="isPending" />
      <SocialStatus
        v-else-if="tabsQuery.data.value && tabs.length > 0 && !isPending"
        :tabs="tabs"
      />
      <div v-if="tabs.length === 0">
        <EmptyState size="100%" />
      </div>
    </div>
  </section>
</template>
<style scoped></style>
