<template>
  <a 
    :href="props.icon.url" 
    class="icon-card-wrapper"
    @click.prevent
    target="_blank"
  >
    <div class="icon-card" :style="{ backgroundColor: props.icon.bgColor }">
      <img v-if="props.icon.img" :src="props.icon.img" :alt="props.icon.name" />
      <span v-else>{{ props.icon.name.charAt(0) }}</span>
    </div>
    <div class="label">{{ props.icon.name }}</div>
  </a>
</template>

<script setup lang="ts">
interface Icon {
  id: string;
  name: string;
  url: string;
  img?: string;
  bgColor?: string;
}

const props = defineProps<{
  icon: Icon;
}>();

</script>

<style lang="scss" scoped>
@import '@/styles/tokens.scss';

.icon-card-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  border-radius: $border-radius-medium;
  padding: var(--icon-card-padding);
  transition: transform $motion-duration-sm $motion-easing-standard, background-color $motion-duration-sm $motion-easing-standard;
  user-select: none; // 拖拽时避免选中文本
  box-sizing: border-box;

  // 悬停效果由父级拖拽状态控制
  &:hover {
    background-color: rgba(255, 255, 255, 0.05);
  }
}

.icon-card {
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: $border-radius-large;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--icon-font-size);
  font-weight: 500;
  color: white;
  box-shadow: $shadow-md;
  margin-bottom: var(--icon-label-margin-top);
  background-size: cover;
  background-position: center;
  pointer-events: none; // 指针事件交给外层容器处理

  img {
    width: 100%;
    height: 100%;
    border-radius: $border-radius-large;
    object-fit: cover;
  }
}

.label {
  font-size: var(--icon-label-font-size);
  color: $color-text-primary;
  text-align: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
</style>
