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

const props = defineProps({
  title: String,
  desc: String,
  icon: String,
  isVip: Boolean,
  // 传入 main.css 中定义的颜色名，例如 'blue', 'purple', 'orange'
  colorTheme: {
    type: String,
    default: 'blue' 
  }
})

// 动态生成符合 main.css 规范的类名，例如 "icon-bg-blue"
// 这样就能利用全局 CSS 中定义的 Dark Mode 适配逻辑
const iconThemeClass = computed(() => `icon-bg-${props.colorTheme}`)
</script>

<template>
  <div class="tool-card">
    <!-- VIP 标签 (使用 main.css 的基础样式并增强定位) -->
    <div v-if="isVip" class="vip-badge card-badge">
      <i class="fa-solid fa-crown"></i> VIP
    </div>
    
    <div class="card-content">
      <!-- 图标容器: 结合全局颜色类和局部布局类 -->
      <div class="icon-box" :class="iconThemeClass">
        <i :class="icon"></i>
      </div>
      
      <!-- 文本区域 -->
      <div class="text-area">
        <h3 class="card-title">
          {{ title }}
          <!-- 悬停出现的箭头 -->
          <span class="arrow-icon">→</span>
        </h3>
        <p class="card-desc">{{ desc }}</p>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 
  注意：这里不再定义颜色变量，而是直接使用 main.css 中的变量 
  这样可以确保切换 html.dark 时组件自动变色
*/

.tool-card {
  /* 使用全局变量 */
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius); /* 使用全局圆角 */
  box-shadow: var(--shadow-sm);
  
  padding: 1.5rem;
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  
  /* 动效配置 */
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              box-shadow 0.3s ease, 
              border-color 0.3s ease;
}

/* 悬停状态 */
.tool-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-hover);
}

/* 图标容器样式 */
.icon-box {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1.2rem;
  
  /* 颜色由 main.css 的 .icon-bg-xxx 类控制，这里只控制动效 */
  transition: transform 0.4s ease;
}

/* 悬停时图标微动 */
.tool-card:hover .icon-box {
  transform: scale(1.1) rotate(3deg);
}

/* 标题样式 */
.card-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main); /* 适配暗黑模式 */
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color 0.3s;
}

/* 悬停时标题高亮 - 使用全局主色 */
.tool-card:hover .card-title {
  color: var(--primary); 
}

/* 描述文字 */
.card-desc {
  font-size: 0.9rem;
  color: var(--text-sub); /* 适配暗黑模式 */
  line-height: 1.6;
  
  /* 多行文本截断 */
  display: -webkit-box;
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 
   VIP 徽章定位调整 
   颜色样式已在 main.css 的 .vip-badge 中定义
   这里只处理它在卡片中的位置
*/
.card-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 10;
}

/* 箭头图标 */
.arrow-icon {
  font-size: 1rem;
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.3s ease;
  color: var(--primary); /* 使用全局主色 */
}

.tool-card:hover .arrow-icon {
  opacity: 1;
  transform: translateX(0);
}
</style>