<template>
  <div 
    class="platform-icon"
    :style="{
      width: size + 'px',
      height: size + 'px',
      background: backgroundColor,
      borderRadius: borderRadius + 'px',
    }"
    @click="$emit('click')"
  >
    <div 
      class="icon-content"
      :style="{
        padding: (size * 0.12) + 'px' 
      }"
    >
      <span 
        class="icon-text"
        :style="{
          fontSize: fontSize + 'px',
          lineHeight: '1.4',
          textShadow: '0 1px 2px rgba(0,0,0,0.15)'
        }"
      >
        {{ text }}
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { stringToColor, calculateFontSize } from '../utils/color'

const props = defineProps<{
  text: string
  size: number
}>()

defineEmits(['click'])

// Now returns a gradient string
const backgroundColor = computed(() => stringToColor(props.text))

// 22% is standard iOS icon curvature, looks pleasing
const borderRadius = computed(() => props.size * 0.22)

const fontSize = computed(() => calculateFontSize(props.size, props.text.length))
</script>

<style scoped>
.platform-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  user-select: none;
  cursor: pointer;
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
}

/* 添加一个微弱的光泽层 */
.platform-icon::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}

.platform-icon:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.platform-icon:active {
  transform: translateY(0) scale(0.96);
  box-shadow: 
    0 2px 4px -1px rgba(0, 0, 0, 0.1), 
    0 1px 2px -1px rgba(0, 0, 0, 0.06);
}

.icon-content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 1; /* Ensure text is above shine */
}

.icon-text {
  font-weight: 600; /*稍微降低一点字重，不要太粗，配合阴影更清晰*/
  text-align: center;
  word-break: break-word;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: 0.5px;
}
</style>
