<template>
  <div :class="twMerge(
    'flex flex-col items-center justify-center h-full absolute -bottom-13 z-30 ',
    position === 'left' ? 'left-[41px]' : 'right-[41px]'
  )">
    <template v-for="(d, i) in data" :key="d.title">
      <div class="my-5 relative" @click.prevent="() => onClick(d)">
        <div class="relative">
          <img :src="imgSrcActive === d.forgeID ? d.hoverImg : d.normalImg" alt="Image" class="w-[360px] h-[150px]">
          <img :src="d.line" alt="Line" :class="twMerge(
            'absolute ',
            position === 'left' ? 'left-full' : 'right-full',
            i % 4 === 3 ? 'top-0' : 'top-1/2'
          )">
        </div>

        <p class="absolute bottom-1/4 translate-y-1/2 right-1/5 mb-1 font-bold text-white text-5xl">{{ d.value }}</p>
      </div>
    </template>
  </div>
</template>

<script setup>
import { ref, defineProps } from 'vue';
import { twMerge } from 'tailwind-merge'

const props = defineProps({
  position: {
    type: String,
    required: true,
    validator: value => ['left', 'right'].includes(value)
  },
  data: {
    type: Array,
    required: true
  },
  imgSrcActive: {
    type: [String, Number],
    default: null
  },
  onClick: {
    type: Function,
    required: true
  }
})

</script>

<style lang="scss" scoped></style>