<template>
  <view class="comment-item">
    <view class="comment-avatar-wrap">
      <image v-if="comment.avatar" class="comment-avatar" :src="comment.avatar" mode="aspectFill"></image>
      <view v-else class="comment-avatar comment-avatar-ph">
        <text class="comment-avatar-text">{{ comment.nickname ? comment.nickname[0] : '酒' }}</text>
      </view>
    </view>
    <view class="comment-body">
      <view class="comment-top">
        <text class="comment-name">{{ comment.nickname }}</text>
        <text class="comment-time">{{ comment.time }}</text>
      </view>
      <text class="comment-content">{{ comment.content }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CommentItem',
  props: {
    comment: { type: Object, default: () => ({}) }
  }
}
</script>

<style lang="scss" scoped>
.comment-item {
  display: flex;
  gap: $sp-md;
  padding: $sp-lg 0;

  &:not(:last-child) {
    border-bottom: 1rpx solid var(--divider-color, rgba(255,255,255,0.08));
  }
}

.comment-avatar-wrap {
  flex-shrink: 0;
}

.comment-avatar {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
}

.comment-avatar-ph {
  background: $bg-elevated;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comment-avatar-text {
  font-size: $fs-sm;
  font-weight: $fw-bold;
  color: $lavender;
}

.comment-body {
  flex: 1;
  min-width: 0;
}

.comment-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8rpx;
}

.comment-name {
  font-size: $fs-sm;
  font-weight: $fw-bold;
  color: $text-secondary;
}

.comment-time {
  font-size: $fs-xs;
  color: $text-tertiary;
}

.comment-content {
  font-size: $fs-base;
  color: $text-primary;
  line-height: $lh-normal;
}
</style>
