<template>
  <view class="user-profile" @click="handleTap">
    <image class="avatar" :src="avatar" mode="aspectFill" />
    <view class="info">
      <view v-if="isLoggedIn" class="info-content">
        <text class="name">{{ name }}</text>
        <text v-if="phone" class="phone">{{ phone }}</text>
      </view>
      <view v-else class="login-prompt">
        <text class="login-text">登录/注册</text>
        <u-icon name="arrow-right" :size="16" color="rgba(255, 255, 255, 0.8)"></u-icon>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
interface Props {
  avatar?: string
  name?: string
  phone?: string
  isLoggedIn?: boolean
}

withDefaults(defineProps<Props>(), {
  avatar: '/static/default-avatar.png',
  name: '用户',
  phone: '',
  isLoggedIn: false
})

const emit = defineEmits<{
  (e: 'click'): void
}>()

function handleTap() {
  emit('click')
}
</script>

<style lang="scss" scoped>
@import '@/static/styles/design-tokens.scss';
@import '@/static/styles/mixins.scss';

.user-profile {
  @include flex-row(flex-start, center);
  gap: $spacing-lg;
  padding: $spacing-3xl $spacing-2xl $spacing-3xl;
}

.avatar {
  width: 128rpx;
  height: 128rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 4rpx solid rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

.info {
  flex: 1;
  min-width: 0;
}

.info-content {
  @include flex-column(center, flex-start);
  gap: $spacing-xs;
}

.name {
  font-size: $font-xl;
  font-weight: $font-semibold;
  color: $text-inverse;
  line-height: $line-height-tight;
}

.phone {
  font-size: $font-sm;
  color: rgba(255, 255, 255, 0.85);
}

.login-prompt {
  @include flex-row(flex-start, center);
  gap: $spacing-xs;
}

.login-text {
  font-size: $font-lg;
  color: $text-inverse;
  font-weight: $font-medium;
}
</style>
