<template>
    <span class="block w-full my-2">
        <span class="text-rotate">
            <span class="justify-items-center">
                <span
                    v-for="(item, index) in items"
                    :key="index"
                    :class="item.className"
                >
                    {{ item.text }}
                </span>
            </span>
        </span>
    </span>
</template>

<script setup lang="ts">
interface RotatingTextItem {
    text: string;
    className: string;
}

defineProps<{
    items: RotatingTextItem[];
}>();
</script>

<style scoped>
.text-rotate:hover,
.text-rotate:hover * {
    animation-play-state: running !important;
}
</style>
