<script setup lang="ts">
import { shallowRef, onMounted, onUnmounted } from "vue"

const props = withDefaults(defineProps<{ 
  direction?: 'x' | 'y';
  duration?: number;
  list: string[]
}>(), {
  direction: 'y',
  duration: 5000
})

const currentIndex = shallowRef(0)

let timer:null | any = null

onMounted(() => {
  timer = setInterval(() => {
    const updateIndex = currentIndex.value + 1 
    currentIndex.value = updateIndex < props.list.length ? updateIndex : 0
  },props.duration)
})

onUnmounted(() => {
  timer && clearInterval(timer)
})
</script>

<template>
  <div class="bg-[#fffbe8] flex items-center mb-[5px] text-[#ed6a0c] overflow-hidden">
    <IconifyIconOffline class="mx-[8px]" icon="bell" />
    <div class="w-full h-[22px] relative overflow-hidden" style="line-height: 22px;font-size: 12px">
        <template v-for="(item, index) in list">
          <Transition :name="`carousel-${props.direction}`">
            <p class="absolute w-full" v-if="index === currentIndex">{{ item }} </p>
          </Transition>
        </template>
    </div>
  </div>
</template>
