<template>
  <li class="wallet-card-item px-3">
    <a
      class="fw_6 text-center"
      href="javascript:void(0);"
      @click="$emit('click', $event)"
    >
      <ul>
        <li class="path1">{{ subtitles[0] || '' }}</li>
        <li class="path2">{{ subtitles[1] || '' }}</li>
        <li class="path3">{{ subtitles[2] || '' }}</li>
        <li class="path4">{{ subtitles[3] || '' }}</li>
      </ul>
      <IconImage v-if="icon" :src="icon" :width="iconWidth" :height="iconHeight" />
      {{ title }}
    </a>
  </li>
</template>

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

defineProps({
  title:      { type: String, default: '' },
  icon:       { type: String, default: '' },
  iconWidth:  { type: [String, Number], default: 30 },
  iconHeight: { type: [String, Number], default: 30 },
  /**
   * Array of up to 4 subtitle strings
   */
  subtitles: { type: Array, default: () => [] },
})

defineEmits(['click'])
</script>
