---
export interface Props {
  animation?: 'fadeIn' | 'fadeInUp' | 'fadeInDown' | 'slideInLeft' | 'slideInRight' | 'scaleIn' | 'rotateIn' | 'bounceIn';
  delay?: number;
  duration?: number;
  easing?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
  trigger?: 'load' | 'scroll' | 'hover' | 'click';
  className?: string;
}

const { 
  animation = 'fadeIn',
  delay = 0,
  duration = 600,
  easing = 'ease-out',
  trigger = 'load',
  className = ''
} = Astro.props;
---

<div 
  class={`animate-wrapper ${className}`}
  data-animation={animation}
  data-trigger={trigger}
  style={`--delay: ${delay}ms; --duration: ${duration}ms; --easing: ${easing};`}
>
  <slot />
</div>

<style>
  .animate-wrapper {
    animation-duration: var(--duration);
    animation-timing-function: var(--easing);
    animation-delay: var(--delay);
    animation-fill-mode: both;
  }
  
  /* 初始状态 */
  .animate-wrapper[data-trigger="scroll"] {
    opacity: 0;
    transform: translateY(30px);
  }
  
  .animate-wrapper[data-trigger="hover"] {
    transition: all var(--duration) var(--easing);
  }
  
  /* 动画定义 */
  .animate-wrapper[data-animation="fadeIn"] {
    animation-name: fadeIn;
  }
  
  .animate-wrapper[data-animation="fadeInUp"] {
    animation-name: fadeInUp;
  }
  
  .animate-wrapper[data-animation="fadeInDown"] {
    animation-name: fadeInDown;
  }
  
  .animate-wrapper[data-animation="slideInLeft"] {
    animation-name: slideInLeft;
  }
  
  .animate-wrapper[data-animation="slideInRight"] {
    animation-name: slideInRight;
  }
  
  .animate-wrapper[data-animation="scaleIn"] {
    animation-name: scaleIn;
  }
  
  .animate-wrapper[data-animation="rotateIn"] {
    animation-name: rotateIn;
  }
  
  .animate-wrapper[data-animation="bounceIn"] {
    animation-name: bounceIn;
  }
  
  /* 触发状态 */
  .animate-wrapper.animate-visible {
    opacity: 1;
    transform: none;
    animation-play-state: running;
  }
  
  /* 关键帧动画 */
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes fadeInDown {
    from {
      opacity: 0;
      transform: translateY(-30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes slideInLeft {
    from {
      opacity: 0;
      transform: translateX(-100%);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(100%);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes scaleIn {
    from {
      opacity: 0;
      transform: scale(0.5);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  @keyframes rotateIn {
    from {
      opacity: 0;
      transform: rotate(-200deg) scale(0.8);
    }
    to {
      opacity: 1;
      transform: rotate(0deg) scale(1);
    }
  }
  
  @keyframes bounceIn {
    0% {
      opacity: 0;
      transform: scale(0.3);
    }
    50% {
      opacity: 1;
      transform: scale(1.05);
    }
    70% {
      transform: scale(0.9);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  /* 悬浮效果 */
  .animate-wrapper[data-trigger="hover"]:hover {
    transform: translateY(-5px) scale(1.02);
  }
  
  /* 减少动画在移动设备上的使用 */
  @media (prefers-reduced-motion: reduce) {
    .animate-wrapper {
      animation: none !important;
      transition: none !important;
    }
  }
</style>

<script>
  // 滚动触发动画
  function initScrollAnimations() {
    const animateElements = document.querySelectorAll('[data-trigger="scroll"]');
    
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('animate-visible');
        }
      });
    }, {
      threshold: 0.1,
      rootMargin: '0px 0px -50px 0px'
    });
    
    animateElements.forEach(element => {
      observer.observe(element);
    });
  }
  
  // 点击触发动画
  function initClickAnimations() {
    const clickElements = document.querySelectorAll('[data-trigger="click"]');
    
    clickElements.forEach(element => {
      element.addEventListener('click', () => {
        element.classList.toggle('animate-visible');
      });
    });
  }
  
  // 初始化
  document.addEventListener('DOMContentLoaded', () => {
    initScrollAnimations();
    initClickAnimations();
  });
</script>