<template>
  <ul class="mt-3 box-outstanding-service">
    <SideTextButton
      v-for="(item, index) in items"
      :key="index"
      :text="item.text"
      :icon="item.icon || ''"
      :icon-width="item.iconWidth || 30"
      :icon-height="item.iconHeight || 30"
      @click="$emit('item-click', item, index)"
      @mouseenter="prefetchPage(item.pagename)"
      @touchstart.passive="prefetchPage(item.pagename)"
    />
  </ul>
</template>

<script setup>
import SideTextButton from './SideTextButton.vue'

defineProps({
  /**
   * Array of { text, icon?, iconWidth?, iconHeight? }
   */
  items: { type: Array, required: true },
})

defineEmits(['item-click'])

const prefetchPage = (pagename) => {
  if (pagename && window.$prefetchPage) window.$prefetchPage(pagename);
};
</script>
