// src/components/BannerCalousels.vue
<template>
  <div class="w-full overflow-hidden p-4">
    <!-- หัวข้อด้านบน -->
    <div class="mb-4 px-2 md:px-4">
      <h4
          class="inline-block text-white text-2xl md:text-3xl font-semibold px-6 py-2 bg-[#1b3872] rounded shadow-md"
      >
        {{ appStore.checkLang.isTh ? 'โอกาสทางอาชีพ / แบนเนอร์ประชาสัมพันธ์' : 'Career Opportunities / Public Relations Banners' }}
      </h4>
    </div>

    <!-- Carousel -->
    <Carousel
        :items-to-show="4"
        :wrap-around="true"
        :autoplay="5000"
        :pause-autoplay-on-hover="true"
        :navigation-enabled="false"
        :pagination-enabled="false"
        class="w-full h-32 md:h-40"
    >
      <Slide v-for="(image, key) in images" :key="key">
        <a
            :href="image.link ? image.link : '#'"
            target="_blank"
            rel="noopener noreferrer"
            class="block w-full h-full"
        >
          <img
              :src="`${appStore.imageBaseUrl}${image.image.url}`"
              alt="Slider Banner"
              class="w-full h-full object-cover rounded-md shadow-sm"
          />
        </a>
      </Slide>
    </Carousel>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Carousel, Slide } from 'vue3-carousel';
// อย่าลืม import 'vue3-carousel/dist/carousel.css'; หากยังไม่ได้ import ในไฟล์หลัก (main.js/ts)
import { useAppStore } from '@/stores/app';

const appStore = useAppStore();
const images = ref([]);

onMounted(async () => {
  images.value = await appStore.find('slider-banners');
});
</script>

<style scoped>

</style>