<template>
  <div class="grid sm:grid-cols-[auto_240px] lg:grid-cols-2 justify-center gap-4 items-stretch mt-6 text-left">
    <!-- Left Column: Links -->
    <div class="grid max-sm:grid-cols-2 gap-4">
      <div v-for="item in publicTabs" :key="item.title">
        <div
            class="flex-col flex gap-1.5 cursor-pointer group"
            :class="{'sm:border-l-4 border-brand-600': selectedItem === item, 'sm:border-l-4  border-navy-25': selectedItem !== item}"
            @click="selectItem(item)"
        >
          <div class="sm:py-4 sm:pl-4 md:pl-6">
            <div
                :class="{'text-gray-900': selectedItem === item, 'text-gray-600': selectedItem !== item}"
                class="max-sm:text-gray-900 max-sm:bg-white max-sm:p-3 max-sm:rounded-lg max-sm:min-h-[84px] text-sm relative
                         sm:text-lg md:text-xl font-semibold sm:mb-2 group-hover:text-gray-900 grid max-sm:grid-cols-[auto_20px] gap-2"
            >
              {{ item.title }}

              <ArrowUpRight class="sm:hidden" />

              <a v-if="selectedItem?.primary_button?.show"
                 :target="selectedItem?.primary_button?.open_in_new_tab ? '_blank' : ''"
                 :href="selectedItem?.primary_button?.url.startsWith('http') ? selectedItem.primary_button.url : `//${selectedItem.primary_button.url}`"
                 class="absolute inset-0 sm:hidden z-10"
              ></a>
            </div>
            <p
                :class="{'text-gray-700': selectedItem === item, 'text-gray-400': selectedItem !== item}"
                class="max-sm:hidden 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="max-sm:hidden 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 lg:max-h-[387px] w-full"/>
          <img
              v-else
              class="rounded-[20px] md:rounded-[40px] object-contain lg: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>