<script setup>
import {ref} from 'vue';
import store from "../../store/index.js";

</script>

<template>
  <div class="user-info-card">
    <div style="position: relative;">
      <img :src="store.getters.profileImage" alt="User Avatar" class="avatar"/>
    </div>
    <div class="user-info">
      <h3>{{ store.state.userInfo.username }}</h3>
      <p>注册日期：{{ store.state.userInfo.birth?.split(' ')[0] || '未知' }}</p>
    </div>
  </div>
</template>

<style scoped>
.user-info-card {
  width: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 20px;
  padding: 30px 0;
}

.user-info-card h3 button {
  color: #fff;
  font-size: 24px;
  margin-top: 10px;
}

.theme-light .user-info-card h3 {
  color: #252525;
}

.user-info-card p {
  font-size: 16px;
}


.avatar {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 20px;
  transition: transform 2s ease;
}

.avatar:hover {
  transform: rotate(3600deg);
  transition: transform 10s ease;
}

</style>
