<template>
  <div
    class="grid lg:grid-cols-3 md:grid-cols-2 items-center justify-center gap-12 py-10"
  >
    <div v-for="article in data" :key="article.slug">
      <NuxtLink :to="'/article/' + article.slug">
        <div class="group text-white">
          <div>
            <div
              class="img-wrapper relative w-full h-0 rounded-[30px]"
              style="padding-top: 66.67%"
            >
              <img
                class="inner-img absolute top-0 left-0 w-full h-full object-cover rounded-[30px]"
                :src="article.thumbnail"
              />
            </div>
          </div>

          <div class="mt-5">
            <div class="flex items-center space-x-2">
              <p class="text-sm">{{ article.category }}</p>
              <div class="border-l border-white h-4"></div>
              <span class="text-sm">{{
                formatDate(article.published_at)
              }}</span>
            </div>
            <p
              class="text-2xl font-bold mt-3 transition-colors duration-300 ease-in-out group-hover:text-[#F7FF00]"
            >
              {{ article.title }}
            </p>
            <p class="mt-3 text-sm line-clamp-3" v-html="article.preview"></p>
          </div>
        </div>
      </NuxtLink>
    </div>
  </div>

  <div class="btn-see-all-articles text-center" v-if="data.length > 3">
    <div
      class="btn-type-1 relative bg-[#F7FF00] text-white rounded-full w-max mx-auto"
    >
      <div
        class="text-type-1 lg:px-12 lg:py-3 px-6 py-3 font-bold text lg:text-xl md:text-lg text-base"
      >
        <div class="flex text-center justify-center items-center space-x-3">
          <div>See All Activities</div>
          <img src="/icon/icon_arrow.svg" class="w-5" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
defineProps(["data"]);

const formatDate = (dateString) => {
  const date = new Date(dateString);
  return date.toLocaleDateString("en-GB", {
    day: "2-digit",
    month: "long",
    year: "numeric",
  });
};
</script>
<style></style>
