<template>
  <div class="level-badge" :style="{ '--level-color': color }">
    <div class="level-icon">
      <span class="level-number">{{ level }}</span>
    </div>
    <div class="level-info" v-if="showInfo">
      <span class="level-title">{{ title }}</span>
      <span class="level-exp" v-if="showExp">{{ exp }}/{{ nextLevelExp }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  level: number
  title?: string
  color?: string
  exp?: number
  nextLevelExp?: number
  showInfo?: boolean
  showExp?: boolean
  size?: 'small' | 'medium' | 'large'
}

const props = withDefaults(defineProps<Props>(), {
  title: '初学者',
  color: '#909399',
  exp: 0,
  nextLevelExp: 1000,
  showInfo: true,
  showExp: false,
  size: 'medium'
})

const sizeMap = {
  small: { icon: 24, font: 12 },
  medium: { icon: 32, font: 14 },
  large: { icon: 48, font: 18 }
}
</script>

<style scoped lang="scss">
.level-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  
  .level-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--level-color) 0%, color-mix(in srgb, var(--level-color) 80%, #000) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    
    .level-number {
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }
  }
  
  .level-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    
    .level-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--level-color);
    }
    
    .level-exp {
      font-size: 12px;
      color: #909399;
    }
  }
}
</style>
