<script setup>
import { Promotion } from '@element-plus/icons-vue'
import { GITCC_COMMUNITY_URL, GITCC_LOGO_URL, PRODUCT_NAME_CN } from '../../shellConstants'
</script>

<template>
  <a
    class="community-card shell-card-elevated"
    :href="GITCC_COMMUNITY_URL"
    target="_blank"
    rel="noopener noreferrer"
  >
    <div class="row">
      <img :src="GITCC_LOGO_URL" alt="" class="mark" width="44" height="44" />
      <div class="text">
        <div class="title">开源社区</div>
        <div class="sub">GitCC · 与 {{ PRODUCT_NAME_CN }} 生态互通</div>
      </div>
      <el-icon class="go"><Promotion /></el-icon>
    </div>
    <p class="hint">在新窗口打开社区首页，获取扩展工具与协作资讯。</p>
  </a>
</template>

<style scoped>
.community-card {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 18px 20px;
  margin-bottom: 20px;
}
.row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.mark {
  border-radius: 10px;
  object-fit: contain;
}
.text {
  flex: 1;
  min-width: 0;
}
.title {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--foreground);
}
.sub {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 4px;
}
.go {
  font-size: 22px;
  color: var(--primary);
}
.hint {
  margin: 12px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.5;
}
</style>
