<template>
  <div class="list-wrapper">
    <div class="project-grid">
      <a
          v-for="(item, index) in data"
          :key="index"
          :href="item.link"
          target="_blank"
          class="project-card"
      >
        <div class="card-content">
          <div class="emoji-box">
            {{ item.emoji || '🔗' }}
          </div>
          <div class="text-group">
            <div class="name">{{ item.name }}</div>
            <div class="desc">{{ item.desc }}</div>
          </div>
        </div>
      </a>
    </div>
  </div>
</template>

<script setup>
defineProps({
  data: {
    type: Array,
    required: true
  }
})
</script>

<style scoped>
/* 使用 VitePress 的标准间距和变量 */
.list-wrapper {
  --row-gap: 16px;
  padding: 0;
}

.project-grid {
  display: grid;
  margin-top: var(--row-gap);
  gap: var(--row-gap);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .project-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.project-card {
  text-decoration: none;
  display: block;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--vp-c-divider); /* 使用 VitePress 分割线颜色 */
  background-color: var(--vp-c-bg-soft); /* 使用 VitePress 次级背景色 */
  transition: all 0.25s ease;
}

/* 悬停效果优化 */
.project-card:hover {
  border-color: var(--vp-c-brand); /* 悬停时显示主题色 */
  background-color: var(--vp-c-bg-el); /* 稍微变亮/变暗 */
  transform: translateY(-2px);
}

.card-content {
  display: flex;
  align-items: center;
  gap: 14px;
}

.emoji-box {
  width: 48px;
  height: 48px;
  background-color: var(--vp-c-bg-mute); /* 静默背景色 */
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.name {
  font-weight: 600;
  color: var(--vp-c-text-1); /* 主文字颜色 */
  font-size: 1.05rem;
}

.desc {
  font-size: 0.9rem;
  color: var(--vp-c-text-2); /* 次要文字颜色 */
  margin-top: 4px;
  line-height: 1.4;
}
</style>