<template>
  <view class="action-badge" :class="badgeClass" v-if="action">
    <text class="badge-icon">{{ badgeIcon }}</text>
    <text class="badge-text">{{ action }}</text>
  </view>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  action: {
    type: String,
    default: ''
  }
});

const badgeClass = computed(() => {
  switch (props.action) {
    case '夯': return 'badge-god';
    case '顶级': return 'badge-good';
    case '人上人': return 'badge-ok';
    case 'NPC': return 'badge-bad';
    case '拉': return 'badge-terrible';
    default: return 'badge-default';
  }
});

const badgeIcon = computed(() => {
  switch (props.action) {
    case '夯': return '👑';
    case '顶级': return '🔥';
    case '人上人': return '🙂';
    case 'NPC': return '😐';
    case '拉': return '👎';
    default: return '';
  }
});
</script>

<style lang="scss" scoped>
.action-badge {
  display: inline-flex;
  align-items: center;
  padding: 4rpx 16rpx;
  border-radius: 100rpx;
  font-size: 20rpx;
  font-weight: bold;
  margin-left: 12rpx;
}

.badge-icon {
  margin-right: 6rpx;
  font-size: 20rpx;
}

/* 夯 - 金色/黄色 */
.badge-god {
  background: linear-gradient(135deg, #fff8e1, #ffe082);
  color: #b07d00;
  border: 1rpx solid #ffecb3;
}

/* 顶级 - 红色/橙色 */
.badge-good {
  background: linear-gradient(135deg, #ffebee, #ffcdd2);
  color: #c62828;
  border: 1rpx solid #ffcdd2;
}

/* 人上人 - 蓝色/绿色 */
.badge-ok {
  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
  color: #2e7d32;
  border: 1rpx solid #c8e6c9;
}

/* NPC - 灰色 */
.badge-bad {
  background: linear-gradient(135deg, #f5f5f5, #e0e0e0);
  color: #616161;
  border: 1rpx solid #e0e0e0;
}

/* 拉 - 深灰/暗红 */
.badge-terrible {
  background: linear-gradient(135deg, #eceff1, #cfd8dc);
  color: #455a64;
  border: 1rpx solid #cfd8dc;
}

.badge-default {
  background-color: #f5f6fa;
  color: #666;
}
</style>