<template>
  <div class="flex flex-col items-center gap-6 pb-[40px] pt-[24px]" :class="{'!pt-0': component.hasOwnProperty('padding_top') && !component?.padding_top}">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 w-full">
      <div v-for="(card, index) in items" :key="index" class="card bg-white sm:p-0 px-4">
        <div v-if="component.type === 'video_grid'" class="relative group">
          <video
              @click="togglePlayPause(index)"
              :ref="(el) => setVideoRef(el, index)"
              class="w-full h-[281px] object-cover rounded-[16px]"
              width="640"
              height="360"
              preload="metadata"
          >
            <source :src="`${card.video}#t=2`" />
          </video>
          <PlayButton
              v-if="!isPlaying[index]"
              class="cursor-pointer absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 group-hover:opacity-100 transition-opacity"
              @click="togglePlayPause(index)">

          </PlayButton>
        </div>
        <img
            v-else-if="card.image"
            :src="card.image"
            alt="Card Image"
            class="w-full h-[281px] object-cover rounded-[16px] mb-4"
        />
        <img v-else class="w-full h-[281px] object-cover rounded-[16px] mb-4" alt="No Available" src="@/assets/img/no_image_available.jpeg">
        <div class="flex flex-col gap-2 items-start text-left w-full">
          <div v-if="card.categories && card.categories.length" class="flex gap-2">
            <span
                v-for="tag in card.categories"
                :key="tag"
                class="border px-2 py-0.5 rounded-[6px] text-sm"
                :class="{
                'bg-navy-50 border-navy-200 text-navy-700': tag.style === 'navy',
                'bg-brand-50 border-brand-200 text-brand-700': tag.style === 'brand',
                'bg-orange-50 border-orange-200 text-orange-700': tag.style === 'orange',
              }"
            >
              {{ tag.name }}
            </span>
          </div>
          <a
              v-if="card?.link"
              :href="formatUrl(card.link)"
              class="text-gray-900 text-lg font-semibold hover:underline block mb-2 w-full"
              target="_blank"
              rel="noopener noreferrer"
          >
            <div class="flex justify-between">
              <span class="w-5/6 leading-[28px]" v-html="card.title"></span>
              <ArrowUpRight class="w-5 h-5 mt-1"></ArrowUpRight>
            </div>
          </a>
          <p class="text-gray-500 text-sm mb-4">{{ card.dateTime }}</p>
        </div>
      </div>
    </div>
    <div v-if="Object.keys(button).length && button?.show" class="flex justify-center">
      <a
          class="border-brand-300 hover:border-brand-700 border text-brand-700 h-[44px] rounded-full px-[14px] py-[10px] inline-flex gap-1.5 items-center font-semibold text-base"
          :href="formatUrl(button.url)"
          :target="button.open_in_new_tab ? '_blank' : ''"
      >
        {{ button.title }}
        <ArrowUpRight class="w-5 h-5"></ArrowUpRight>
      </a>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import ArrowUpRight from "@/assets/img/icons/arrow-up-right.svg";
import PlayButton from "@/assets/svg/play.svg";
import { formatUrl } from "@/components/helpers/common";

const props = defineProps({
  component: {
    required: true,
    type: Object,
  },
});

let items = [];
if (props.component.type === 'news_grid') {
  items = [...props.component.content?.items || []];
} else {
  items = [...props.component?.data || []];
}

const button = props.component.button || {};

const isPlaying = ref(items.map(() => false));
const videoRefs = ref(items.map(() => null));

const togglePlayPause = (index) => {
  const video = videoRefs.value[index];
  if (!video) return;

  if (video.paused) {
    video.play();
    isPlaying.value[index] = true;
  } else {
    video.pause();
    isPlaying.value[index] = false;
  }
};

const setVideoRef = (el, index) => {
  if (el) {
    videoRefs.value[index] = el;
  }
};
</script>

<style scoped>
.card {
  @apply flex flex-col items-center text-center;
}
</style>