<template>
  <view
    class="badge"
    :class="{ 'badge-unlocked': achievement.unlocked, 'badge-locked': !achievement.unlocked }"
    @click="$emit('click')"
  >
    <view class="badge-icon-wrap">
      <text class="badge-icon">{{ achievement.icon }}</text>
      <view v-if="!achievement.unlocked" class="badge-lock">
        <text class="badge-lock-icon">🔒</text>
      </view>
    </view>
    <text class="badge-name">{{ achievement.name }}</text>
  </view>
</template>

<script>
export default {
  props: {
    achievement: { type: Object, required: true }
  },
  emits: ['click']
}
</script>

<style lang="scss" scoped>
.badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: $sp-sm;
  padding: $sp-lg $sp-sm;
  background: $bg-card;
  border-radius: $radius-lg;
  transition: all $duration-fast $ease-out;

  &:active {
    transform: scale(0.95);
  }

  &.badge-unlocked {
    .badge-icon-wrap {
      box-shadow: 0 0 24rpx rgba(232,168,56,0.3);
      border-color: rgba(232,168,56,0.3);
    }

    .badge-name {
      color: $text-primary;
    }
  }

  &.badge-locked {
    opacity: 0.5;

    .badge-icon {
      filter: grayscale(1);
    }
  }
}

.badge-icon-wrap {
  width: 96rpx;
  height: 96rpx;
  background: $bg-elevated;
  border-radius: $radius-full;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3rpx solid var(--border-faint, rgba(255, 255, 255, 0.08));
  position: relative;
}

.badge-icon {
  font-size: 48rpx;
}

.badge-lock {
  position: absolute;
  bottom: -4rpx;
  right: -4rpx;
  width: 36rpx;
  height: 36rpx;
  background: $bg-base;
  border-radius: $radius-full;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-lock-icon {
  font-size: 20rpx;
}

.badge-name {
  font-size: $fs-xs;
  color: $text-secondary;
  text-align: center;
}
</style>
