<template>
  <div class="mt-5">
    <div class="tf-container">
      <div class="tf-title d-flex justify-content-between">
        <h3 class="fw_6">{{ title }}</h3>
        <a
          v-if="viewAllText"
          href="javascript:void(0);"
          class="primary_color fw_6"
          @click="$emit('view-all')"
        >
          {{ viewAllText }}
        </a>
      </div>
      <ul class="box-service mt-3">
        <ServiceButton
          v-for="(item, index) in items"
          :key="index"
          :icon="item.icon"
          :title="item.title"
          :bg-color8="item.bgColor8 || false"
          @click="$emit('item-click', item, index)"
          @mouseenter="prefetchPage(item.pagename)"
          @touchstart.passive="prefetchPage(item.pagename)"
        />
      </ul>
    </div>
  </div>
</template>

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

defineProps({
  title:       { type: String, default: '' },
  viewAllText: { type: String, default: '' },
  /**
   * Array of { icon, title, bgColor8? }
   */
  items: { type: Array, required: true },
})

defineEmits(['view-all', 'item-click'])

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