---
interface Props {
  phrases: string[];
  className?: string;
  textSize?: string;
}

const { 
  phrases = ["河北旅游", "河北文化", "河北美食"], 
  className = "",
  textSize = "text-7xl sm:text-8xl md:text-9xl"
} = Astro.props;

const id = `morphing-text-${Math.random().toString(36).substr(2, 9)}`;
---

<div class={`relative mx-auto w-full max-w-screen-xl text-center font-sans font-bold ${className}`} id={id}>
  <!-- 容器高度设置为自动，让内容决定高度 -->
  <div class="relative flex justify-center items-center text-center min-h-[1.5em]">
    <span class="text-span-1 block ${textSize} opacity-100 transition-all absolute left-1/2 transform -translate-x-1/2">{phrases[0]}</span>
    <span class="text-span-2 absolute left-1/2 transform -translate-x-1/2 block ${textSize} opacity-0 transition-all"></span>
  </div>
  
  <!-- SVG 滤镜 -->
  <svg class="fixed h-0 w-0">
    <defs>
      <filter id="threshold">
        <feColorMatrix
          in="SourceGraphic"
          type="matrix"
          values="1 0 0 0 0
                  0 1 0 0 0
                  0 0 1 0 0
                  0 0 0 255 -140"
        />
      </filter>
    </defs>
  </svg>
</div>

<script define:vars={{ phrases, id }}>
  document.addEventListener('DOMContentLoaded', () => {
    const container = document.getElementById(id);
    if (!container) return;
    
    const text1 = container.querySelector('.text-span-1');
    const text2 = container.querySelector('.text-span-2');
    
    if (!text1 || !text2) return;
    
    // 设置初始文本
    text2.textContent = phrases[1];
    
    // 应用滤镜
    container.style.filter = 'url(#threshold) blur(0.6px)';
    
    const morphTime = 1.5;
    const cooldownTime = 0.5;
    
    let textIndex = 0;
    let morph = 0;
    let cooldown = cooldownTime;
    let currentlyDisplayedIs1 = true;
    let lastTime = new Date();
    let animationFrameId;
    
    function animate() {
      animationFrameId = requestAnimationFrame(animate);
      
      const newTime = new Date();
      const dt = (newTime - lastTime) / 1000;
      lastTime = newTime;
      
      cooldown -= dt;
      
      if (cooldown <= 0) {
        morph -= cooldown;
        cooldown = 0;
        
        let fraction = morph / morphTime;
        
        if (fraction > 1) {
          cooldown = cooldownTime;
          fraction = 1;
        }
        
        // 设置元素样式
        const visibleText = currentlyDisplayedIs1 ? text1 : text2;
        const hiddenText = currentlyDisplayedIs1 ? text2 : text1;
        
        hiddenText.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;
        hiddenText.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;
        
        const invertedFraction = 1 - fraction;
        visibleText.style.filter = `blur(${Math.min(8 / invertedFraction - 8, 100)}px)`;
        visibleText.style.opacity = `${Math.pow(invertedFraction, 0.4) * 100}%`;
        
        visibleText.textContent = phrases[textIndex % phrases.length];
        hiddenText.textContent = phrases[(textIndex + 1) % phrases.length];
        
        if (fraction === 1) {
          textIndex = (textIndex + 1) % phrases.length;
          currentlyDisplayedIs1 = !currentlyDisplayedIs1;
        }
      } else {
        morph = 0;
      }
    }
    
    // 启动动画
    setTimeout(animate, 100);
    
    // 清理
    window.addEventListener('beforeunload', () => {
      cancelAnimationFrame(animationFrameId);
    });
  });
</script>

<style>
  /* 确保文本样式适合横向显示 */
  .text-span-1, .text-span-2 {
    width: auto;
    white-space: nowrap;
    display: block;
    line-height: 1.2;
    text-align: center;
  }
  
  /* 确保容器有合适的内边距 */
  div[id^="morphing-text-"] {
    padding: 1rem 0;
  }
</style> 