<script setup lang="ts">
defineOptions({
  name: 'ChatShimmerText',
});

withDefaults(
  defineProps<{
    active?: boolean;
    text: string;
  }>(),
  {
    active: false,
  },
);
</script>

<template>
  <span class="chat-shimmer-text" :class="{ 'is-active': active }">
    {{ text }}
  </span>
</template>

<style scoped>
.chat-shimmer-text {
  display: inline-block;
  min-width: 0;
  overflow: hidden;
  color: var(--el-text-color-placeholder);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-shimmer-text.is-active {
  color: transparent;
  background: linear-gradient(
    100deg,
    var(--el-text-color-placeholder) 0%,
    var(--el-text-color-secondary) 45%,
    var(--el-text-color-placeholder) 80%
  );
  background-size: 220% 100%;
  background-clip: text;
  animation: chat-shimmer-text-flow 2.2s ease-in-out infinite;
}

@keyframes chat-shimmer-text-flow {
  0% {
    background-position: 120% 0;
  }

  100% {
    background-position: -120% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-shimmer-text.is-active {
    animation: none;
  }
}
</style>
