import { ReactNode } from 'react';
import { useScrollAnimation } from '@/hooks/useScrollAnimation';
import { cn } from '@/lib/utils';
import { AnimationType, AnimationSpeed, AnimationEasing } from '@/types/cms';

interface AnimatedBlockProps {
  children: ReactNode;
  animation?: AnimationType;
  speed?: AnimationSpeed;
  delay?: number;
  easing?: AnimationEasing;
  staggerIndex?: number;
  className?: string;
}

export function AnimatedBlock({ 
  children, 
  animation = 'fade-up',
  speed = 'normal',
  delay = 0,
  easing = 'default',
  staggerIndex = 0,
  className 
}: AnimatedBlockProps) {
  const { ref, isVisible } = useScrollAnimation<HTMLDivElement>();

  // Calculate actual delay including stagger
  const actualDelay = delay + (staggerIndex * 100);

  // Skip animation if type is 'none'
  if (animation === 'none') {
    return <div className={className}>{children}</div>;
  }

  const animationClasses: Record<Exclude<AnimationType, 'none'>, string> = {
    'fade-up': 'translate-y-8 opacity-0',
    'fade-in': 'opacity-0',
    'slide-up': 'translate-y-12 opacity-0',
    'scale-in': 'scale-95 opacity-0',
    'slide-left': 'translate-x-12 opacity-0',
    'slide-right': '-translate-x-12 opacity-0',
    // Design System 2026: Premium animations
    'zoom-in': 'scale-90 opacity-0',
    'blur-in': 'opacity-0 blur-sm',
    'rotate-in': 'rotate-[-3deg] scale-95 opacity-0',
  };

  const speedDurations: Record<AnimationSpeed, string> = {
    fast: 'duration-300',
    normal: 'duration-500',
    slow: 'duration-700',
  };

  // Design System 2026: Premium easing curves
  const easingClasses: Record<AnimationEasing, string> = {
    default: 'ease-out',
    premium: 'ease-premium',
    'bounce-soft': 'ease-bounce-soft',
    elastic: 'ease-elastic',
  };

  const visibleClasses = 'translate-y-0 translate-x-0 scale-100 opacity-100 blur-0 rotate-0';

  return (
    <div
      ref={ref}
      className={cn(
        'transition-all',
        speedDurations[speed],
        easingClasses[easing],
        isVisible ? visibleClasses : animationClasses[animation],
        className
      )}
      style={{ transitionDelay: `${actualDelay}ms` }}
    >
      {children}
    </div>
  );
}
