---
interface Props {
  text?: string;
  href?: string;
  className?: string;
  color?: string;
  particleCount?: number;
}

const { 
  text = "点击我", 
  href,
  className = "",
  color = "#6366f1",
  particleCount = 30
} = Astro.props;

const buttonId = `particle-btn-${Math.random().toString(36).substring(2, 11)}`;
---

<div class={`particle-button-container ${className}`}>
  {href ? (
    <a 
      href={href}
      id={buttonId}
      class="particle-button relative inline-block px-6 py-3 rounded-md bg-color-primary-600 hover:bg-color-primary-700 text-white font-medium transition-all duration-300 overflow-hidden"
    >
      <span class="relative z-10">{text}</span>
    </a>
  ) : (
    <button 
      id={buttonId}
      class="particle-button relative inline-block px-6 py-3 rounded-md bg-color-primary-600 hover:bg-color-primary-700 text-white font-medium transition-all duration-300 overflow-hidden"
    >
      <span class="relative z-10">{text}</span>
    </button>
  )}
  <div class="particles-container"></div>
</div>

<style>
  .particle-button-container {
    position: relative;
    display: inline-block;
  }

  .particle-button {
    transform: translateY(0);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  .particle-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 14px rgba(0, 0, 0, 0.15);
  }

  .particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
  }
</style>

<script define:vars={{ buttonId, color, particleCount }}>
  document.addEventListener('DOMContentLoaded', () => {
    const button = document.getElementById(buttonId);
    if (!button) return;
    
    const container = button.closest('.particle-button-container');
    if (!container) return;
    
    const particles = [];
    
    // 创建粒子元素
    for (let i = 0; i < particleCount; i++) {
      const particle = document.createElement('div');
      particle.classList.add('particle');
      particle.style.backgroundColor = color;
      container.appendChild(particle);
      particles.push(particle);
    }
    
    button.addEventListener('mouseenter', (e) => {
      const buttonRect = button.getBoundingClientRect();
      const centerX = buttonRect.left + buttonRect.width / 2;
      const centerY = buttonRect.top + buttonRect.height / 2;
      
      particles.forEach((particle, index) => {
        // 随机大小
        const size = Math.random() * 8 + 4;
        particle.style.width = `${size}px`;
        particle.style.height = `${size}px`;
        
        // 初始位置为按钮中心
        particle.style.left = `${buttonRect.width / 2}px`;
        particle.style.top = `${buttonRect.height / 2}px`;
        
        // 随机方向和距离
        const angle = Math.random() * Math.PI * 2;
        const distance = Math.random() * 90 + 30;
        const destinationX = Math.cos(angle) * distance;
        const destinationY = Math.sin(angle) * distance;
        
        // 随机动画时间
        const duration = Math.random() * 1000 + 500;
        const delay = Math.random() * 200;
        
        // 设置动画
        particle.style.transition = `all ${duration}ms ease-out ${delay}ms`;
        
        // 设置透明度
        particle.style.opacity = '0';
        
        // 触发重绘，然后应用动画
        setTimeout(() => {
          particle.style.opacity = '1';
          particle.style.transform = `translate(${destinationX}px, ${destinationY}px)`;
          
          // 动画结束后重置
          setTimeout(() => {
            particle.style.opacity = '0';
            particle.style.transform = `translate(${buttonRect.width / 2}px, ${buttonRect.height / 2}px)`;
          }, duration + delay);
        }, 10);
      });
    });
  });
</script> 