<template>
  <view class="friend-item" @click="$emit('tap', friend)">
    <view class="friend-avatar-wrap">
      <image v-if="friend.avatar" class="friend-avatar" :src="friend.avatar" mode="aspectFill"></image>
      <view v-else class="friend-avatar friend-avatar-ph">
        <text class="friend-avatar-text">{{ friend.nickname ? friend.nickname[0] : '酒' }}</text>
      </view>
      <view v-if="friend.online" class="friend-online"></view>
    </view>
    <view class="friend-info">
      <text class="friend-name">{{ friend.nickname }}</text>
      <text class="friend-last">{{ friend.lastDrink }} · {{ friend.lastDrinkTime }}</text>
    </view>
    <slot name="action"></slot>
  </view>
</template>

<script>
export default {
  name: 'FriendItem',
  props: {
    friend: { type: Object, default: () => ({}) }
  },
  emits: ['tap']
}
</script>

<style lang="scss" scoped>
.friend-item {
  display: flex;
  align-items: center;
  gap: $sp-md;
  padding: $sp-lg;
  background: $bg-card;
  border-radius: $radius-lg;
  border: 1rpx solid var(--border-faint, rgba(255,255,255,0.08));
  margin-bottom: $sp-sm;

  &:active {
    background: $bg-card-alt;
  }
}

.friend-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.friend-avatar {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
}

.friend-avatar-ph {
  background: linear-gradient(135deg, rgba(232,168,56,0.15), rgba(139,133,184,0.15));
  display: flex;
  align-items: center;
  justify-content: center;
}

.friend-avatar-text {
  font-size: $fs-lg;
  font-weight: $fw-bold;
  color: $amber;
}

.friend-online {
  position: absolute;
  bottom: 4rpx;
  right: 4rpx;
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background: $mint;
  border: 3rpx solid $bg-card;
}

.friend-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}

.friend-name {
  font-size: $fs-base;
  font-weight: $fw-bold;
  color: $text-primary;
}

.friend-last {
  font-size: $fs-xs;
  color: $text-tertiary;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
