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

const projectsQuery = useMarketingVideosQuery();
const projects = computed(() => projectsQuery.data.value ?? []);
const isPending = computed(() => projectsQuery.isPending.value);
</script>
<template>
  <section class="social-videos py-section bg-gradient-odd">
    <div class="container mx-auto px-4">
      <SectionHeadline :title="$t('socialMedia.videosTitle')" />
      <SkeletonsSocialVideosSliderSkeleton v-if="isPending" />
      <SocialVideosSlider
        v-if="projectsQuery.data.value && projects.length >= 3 && !isPending"
        :projects="projects"
      />
      <div v-if="projects.length < 3">
        <EmptyState size="100%" />
      </div>
    </div>
  </section>
</template>
<style scoped></style>
