<template>
  <div class="chat-loading">
    <div class="loading-container flex flex-column flex-align-center">
      <img src="@/assets/images/chat_loading.png" alt="Loading" class="loading-image" />
      <!-- 阴影效果 -->
      <div class="loading-shadow"></div>
      <div class="loading-text">{{ title }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 这个组件只负责显示loading动画

// 定义组件props类型
const props = defineProps({
	title: {
		type: String,
		default: 'Analyzing the Outfit...'
	}
})


</script>

<style lang="less" scoped>
.chat-loading {
  display: flex;
  justify-content: flex-start;
}

.loading-container {
  position: relative;
}

.loading-image {
  width: 36.4rem;
  height: 36.4rem;
  animation: rotate 1s linear infinite;
}

.loading-shadow {
  width: 19.6rem;
  height: 5.2rem;
  background-color: #d9d9d9;
  border-radius: 50%;
  filter: blur(35.5px);
  margin-top: 5.1rem;
  margin-bottom: 6.4rem;
}

.loading-text{
  font-family: 'satoshiRegular';
  font-size: 4.8rem;
  letter-spacing: 0.02em;
  line-height: 124%;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
