<template>
  <div class="group" data-aos="fade-up" data-aos-delay="50">
    <div class="overflow-hidden rounded-2xl bg-white border border-gray-100 shadow-sm hover:shadow-lg transition-all duration-300 transform group-hover:-translate-y-1">
      <div class="relative overflow-hidden">
        <!-- 图片占位 -->
        <div class="bg-gray-200 border-2 border-dashed rounded-xl w-full aspect-square">
          <div v-if="member.avatar" class="w-full h-full flex items-center justify-center bg-blue-50 bg-cover bg-center"
               :style="{
                  backgroundImage: `url(${member.avatar})`
               }"
          >
          </div>
          <div v-else class="w-full h-full flex items-center justify-center bg-blue-50">
            <i class="fas fa-user text-4xl text-gray-300"></i>
          </div>
        </div>

        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent opacity-0 group-hover:opacity-90 transition-opacity duration-300 flex flex-col justify-end p-6">
          <div class="text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <p class="text-sm">{{ member.description }}</p>
            <div class="flex mt-4 space-x-3">
              <a v-for="(social, idx) in member.social" :key="idx" :href="social.link"
                 class="w-8 h-8 rounded-full bg-white/20 hover:bg-amber-600 flex items-center justify-center text-white">
                <i :class="social.icon"></i>
              </a>
            </div>
          </div>
        </div>
      </div>

      <div class="p-6">
        <h3 class="text-lg font-bold text-gray-900">{{ member.name }}</h3>
        <p class="text-amber-600 text-sm font-medium">{{ member.position }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  member: {
    type: Object,
    default: () => ({
      name: '张经理',
      position: '技术总监',
      description: '拥有10年行业经验的技术专家',
      avatar: 'https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
      social: [
        { icon: 'fab fa-linkedin-in', link: '#' },
        { icon: 'fab fa-weibo', link: '#' },
      ]
    })
  }
})
</script>
