'use client';

import { useEffect, useRef } from 'react';
import { gsap } from 'gsap';

interface GSAPAnimationProps {
  className?: string;
  color?: string;
}

export function GSAPAnimation({
  className = '',
  color = '#C41E3A'
}: GSAPAnimationProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const elementsRef = useRef<HTMLDivElement[]>([]);

  useEffect(() => {
    if (!containerRef.current) return;

    const elements = elementsRef.current;
    
    elements.forEach((el, i) => {
      gsap.fromTo(el,
        {
          opacity: 0,
          scale: 0,
          rotation: 0
        },
        {
          opacity: 0.15,
          scale: 1,
          rotation: 360,
          duration: 8,
          delay: i * 1.5,
          repeat: -1,
          yoyo: true,
          ease: 'power2.inOut'
        }
      );
    });

    return () => {
      gsap.killTweensOf(elements);
    };
  }, []);

  const shapes = [
    { type: 'circle', size: 100, x: 15, y: 20 },
    { type: 'square', size: 80, x: 75, y: 15 },
    { type: 'circle', size: 60, x: 65, y: 65 },
    { type: 'square', size: 50, x: 20, y: 70 }
  ];

  return (
    <div ref={containerRef} className={`absolute inset-0 pointer-events-none ${className}`}>
      {shapes.map((shape, index) => (
        <div
          key={index}
          ref={el => {
            if (el) elementsRef.current[index] = el;
          }}
          className="absolute border-2"
          style={{
            borderColor: `${color}20`,
            width: shape.size,
            height: shape.size,
            left: `${shape.x}%`,
            top: `${shape.y}%`,
            borderRadius: shape.type === 'circle' ? '50%' : '0'
          }}
        />
      ))}
    </div>
  );
}

export default GSAPAnimation;