<template>
  <a 
    :href="props.icon.url" 
    class="icon-card-wrapper"
    :class="`size-${props.icon.size ?? '1x1'}`"
    @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.text?.trim() || props.icon.name.charAt(0) }}</span>
    </div>
    <div class="label">{{ props.icon.name }}</div>
  </a>
</template>

<script setup lang="ts">
type IconSize = '1x1' | '1x2' | '2x1' | '2x2' | '2x4';

interface Icon {
  id: string;
  name: string;
  url: string;
  size?: IconSize;
  img?: string;
  text?: string;
  bgColor?: string;
}

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

</script>

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

.icon-card-wrapper {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  border-radius: var(--icon-radius, #{$border-radius-small});
  padding: var(--icon-card-padding);
  transition: transform $motion-duration-sm $motion-easing-standard;
  user-select: none; // 拖拽时避免选中文本
  box-sizing: border-box;

  // 悬停效果由父级拖拽状态控制
  &:hover {
    .icon-card {
      box-shadow: $shadow-lg;
    }
  }
}

.icon-card {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: var(--icon-radius, #{$border-radius-small});
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--icon-font-size);
  font-weight: 500;
  color: white;
  box-shadow: $shadow-md;
  transition: box-shadow $motion-duration-sm $motion-easing-standard;
  background-size: cover;
  background-position: center;
  pointer-events: none; // 指针事件交给外层容器处理

  img {
    width: 100%;
    height: 100%;
    border-radius: var(--icon-radius, #{$border-radius-small});
    object-fit: cover;
  }
}

.label {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: var(--icon-label-margin-top);
  transform: translateX(-50%);
  font-size: var(--icon-label-font-size);
  color: $color-text-primary;
  text-align: center;
  width: 100%;
  max-width: 100%;
  visibility: var(--icon-label-visibility, visible);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
</style>
