<script setup lang="ts">
interface FeatureInfo {
  icon: Component
  title: string
  description: string
}

const props = defineProps<{
  features: FeatureInfo[]
}>()

const selected = defineModel<number>({ default: 0 })
const duration = 5000
let timer: ReturnType<typeof setTimeout> | null = null

const nextFeature = () => {
  selected.value = (selected.value + 1) % props.features.length
  startTimer()
}

const startTimer = () => {
  clearTimer()
  timer = setTimeout(() => {
    nextFeature()
  }, duration)
}

const clearTimer = () => {
  if (timer) {
    clearTimeout(timer)
    timer = null
  }
}

function selectFeature(idx: number) {
  selected.value = idx
  startTimer()
}

onMounted(() => startTimer())
onUnmounted(() => clearTimer())
</script>

<template>
  <div
    v-for="(item, idx) in features"
    :key="idx"
    class="relative flex flex-col pl-3 cursor-pointer"
    @click="selectFeature(idx)"
  >
    <div
      v-if="selected === idx"
      class="absolute left-0 top-0 w-[2px] bg-blue-700 dark:bg-blue-500 z-20 h-full rounded-full"
      :class="{ 'fill-animation': selected === idx }"
    />

    <div
      class="absolute left-0 top-0 w-[2px] bg-gray-500/50 z-10 h-full rounded-full"
    />

    <div class="flex items-center gap-2 relative z-10">
      <div
        :class="[
          'transition-all duration-300 ease-in-out',
          selected === idx ? 'rounded-md bg-blue-700 dark:bg-blue-500 p-2 icon-bg' : 'size-fit'
        ]"
      >
        <component
          :is="item.icon"
          class="shrink-0 size-6 transition-colors duration-300 ease-in-out"
          :class="selected === idx ? 'text-white' : 'text-gray-600'"
        />
      </div>
      <p
        class="font-semibold text-xl transition-colors duration-300 ease-in-out"
        :class="selected === idx ? '' : 'text-gray-600'"
      >
        {{ item.title }}
      </p>
    </div>

    <a-transition-height
      :transition="{
        enterActiveClass: 'overflow-hidden transition-[height] duration-[1s] ease-in-out',
        leaveActiveClass: 'overflow-hidden transition-[height] duration-[1s] ease-in-out'
      }"
    >
      <div
        v-if="selected === idx"
      >
        <p class="text-sm pt-3">
          {{ item.description }}
        </p>
      </div>
    </a-transition-height>
  </div>
</template>

<style lang="scss" scoped>
.icon-bg {
  box-shadow: -4px 4px 0px 0px #007AFF1A;
}

.fill-animation {
  animation: borderFill 5s linear forwards;
}

@keyframes borderFill {
  0% { height: 0; }
  100% { height: 100%; }
}
</style>
