<template>
  <div class="flex flex-col md:flex-row justify-center gap-4 items-stretch mt-6">
    <!-- Left Column: Links -->
    <div class="flex-1 w-full md:w-1/2 flex flex-col">
      <div v-for="item in publicTabs" :key="item.title">
        <div
            class="flex-col flex gap-1.5 cursor-pointer mb-4 group"
            :class="{'border-l-4 border-brand-600': selectedItem === item, 'border-l-4  border-gray-100': selectedItem !== item}"
            @click.prevent="selectItem(item)"
        >
          <div class="py-4 pl-4 md:pl-6">
            <p
                :class="{'text-gray-900': selectedItem === item, 'text-gray-600': selectedItem !== item}"
                class="text-lg md:text-xl font-semibold mb-2 group-hover:text-gray-900"
            >
              {{ item.title }}
            </p>
            <p
                :class="{'text-gray-700': selectedItem === item, 'text-gray-400': selectedItem !== item}"
                class="text-sm md:text-md font-normal group-hover:text-gray-700"
                v-html="item.description"
            >
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- Right Column: Image and Button -->
    <div class="flex-1 w-full md:w-1/2 bg-transparent flex flex-col items-center">
      <transition name="fade" mode="out-in">
        <div class="flex flex-col items-center" :key="selectedItem?.title">
          <img
              v-if="selectedItem?.featured_image"
              :src="selectedItem.featured_image"
              alt="Selected Item Image"
              class="rounded-[20px] md:rounded-[40px] object-contain max-h-[200px] md:max-h-[387px] w-full"/>
          <img
              v-else
              class="rounded-[20px] md:rounded-[40px] object-contain max-h-[200px] md:max-h-[387px] w-full"
              src="@/assets/img/no_image_available.jpeg"
              alt="No Image Available">
          <a
              v-if="selectedItem?.primary_button?.show"
              class="text-sm md:text-md font-semibold text-brand-600 flex items-center gap-2 mt-4"
              :target="selectedItem?.primary_button?.open_in_new_tab ? '_blank' : ''"
              :href="selectedItem?.primary_button?.url.startsWith('http') ? selectedItem.primary_button.url : `//${selectedItem.primary_button.url}`"
          >
            {{ selectedItem?.primary_button?.label ?? 'N/A' }}
            <ArrowUpRight class="w-4 h-4 md:w-5 md:h-5" />
          </a>
        </div>
      </transition>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import ArrowUpRight from '@/assets/img/icons/arrow-up-right.svg';

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

const component = ref(props.component);
const selectedItem = ref(null);

const publicTabs = ref(component.value.data.filter((item) => item.public));

const selectItem = (item) => {
  selectedItem.value = item;
};

onMounted(() => {
  if (publicTabs.value.length > 0) {
    selectItem(publicTabs.value[0]);
  }
});
</script>
<style scoped>
.fade-enter-active, .fade-leave-active {
  @apply transition-opacity duration-300;
}
.fade-enter-from, .fade-leave-to {
  @apply opacity-0;
}
</style>