// src/components/WebLinks.vue
<template>
  <div class="mt-6 mb-6 p-4">
    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
      <div
          class="text-center p-2 border border-blue-400 bg-blue-200 hover:bg-blue-300 transition-colors duration-200 rounded-md"
          v-for="(image, key) in images"
          :key="key"
      >
        <a :href="image.link" target="_blank" rel="noopener noreferrer" class="block">
          <img
              :src="`${appStore.imageBaseUrl}${image.image[0].url}`"
              alt="Web Link Icon"
              class="mx-auto w-16 h-16 object-contain mb-2"
          />
          <p class="text-sm font-medium text-gray-800 leading-tight">
            {{ appStore.checkLang.isTh ? image.title : image.title_en }}
          </p>
        </a>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useAppStore } from '@/stores/app';

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

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

<style scoped>
/* No specific styles needed, using Tailwind classes */
</style>
