<template>
  <div class="w-full flex flex-col justify-center">
    <div class="flex gap-2 w-full max-w-4xl mx-auto flex-row flex-wrap justify-center">
      <div v-for="item in data?.articles" :key="item.slug" class="contents">
        <BaseListImageItem
          v-if="articleLookup?.show_image"
          :data="item"
          :allow-navigation="articleLookup.enable_detail"
          :url-overwrite="data?.link_to_articles"
        />
        <BaseListItem
          v-else-if="articleLookup"
          :data="item"
          :allow-navigation="articleLookup.enable_detail"
          :url-overwrite="data?.link_to_articles"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { PropType } from "vue";
import type SharedEmphasiseArticle from "~~/types/component/shared/emphasiseArticle";
import type Lookup from "~~/types/collection/lookup";

const { find } = useStrapi();
const { data: lookup } = await useAsyncData(() =>
  find<Lookup>("collection-lookups", {
    filters: {
      collection: { $eq: "articles" },
    },
  })
);
const articleLookup = ref(lookup.value?.data[0]);

defineProps({
  data: Object as PropType<SharedEmphasiseArticle>,
});
</script>
