<script setup lang="ts">
import { useMarketingPostsQuery } from "~/queries/marketing";
import type { Post } from "~/types/Marketing";

const postsQuery = useMarketingPostsQuery();
const state = computed(() => postsQuery.state);
const posts = computed(() => postsQuery.data.value || []);
const isPending = computed(() => postsQuery.isPending.value);
</script>
<template>
  <section class="py-section bg-gradient-odd socialWork">
    <div class="container mx-auto px-4">
      <SectionHeadline :title="$t('socialMedia.postsTitle')" />
      <div
        v-if="isPending"
        class="bg-surface-background border-surface-border mx-auto flex w-full flex-col gap-4 rounded-[2rem] border p-4 lg:h-[654px] lg:flex-row xl:max-w-[1190px]"
      >
        <div class="flex h-full flex-1 flex-col gap-y-4">
          <div
            class="h-full animate-pulse rounded-2xl bg-gray-200 dark:bg-gray-700"
          />
          <div class="flex flex-col gap-4 md:flex-row lg:h-56">
            <div
              class="h-full w-full animate-pulse rounded-2xl bg-gray-200 dark:bg-gray-700"
            />
            <div
              class="h-full w-full animate-pulse rounded-2xl bg-gray-200 dark:bg-gray-700"
            />
          </div>
        </div>
        <div
          class="animate-pulse rounded-2xl bg-gray-200 lg:h-[620px] lg:w-[350px] dark:bg-gray-700"
        />
      </div>
      <SocialSliderWithControls
        v-else-if="posts.length > 0 && !isPending"
        :posts="posts as Post[]"
        :is-pending="isPending"
      />

      <div v-else>
        <EmptyState size="100%" />
      </div>
    </div>
  </section>
</template>
<style scoped></style>
