import React, { useEffect, useState } from 'react';

const logoVariants = [
  { emoji: '🎨', rotation: 360, scale: 1.2 },
  { emoji: '🌈', rotation: -360, scale: 1.1 },
  { emoji: '🎯', rotation: 720, scale: 1.3 },
  { emoji: '✨', rotation: -720, scale: 1.0 },
  { emoji: '🔄', rotation: 360, scale: 1.2 },
  { emoji: '🎪', rotation: -360, scale: 1.1 },
  { emoji: '🌀', rotation: 1080, scale: 1.2 },
  { emoji: '💫', rotation: -1080, scale: 1.0 },
  { emoji: '🖨️', rotation: 360, scale: 1.2 },
  { emoji: '🧵', rotation: -360, scale: 1.1 },
  { emoji: '🎭', rotation: 720, scale: 1.2 },
  { emoji: '🎲', rotation: -720, scale: 1.3 },
  { emoji: '🔮', rotation: 360, scale: 1.1 },
  { emoji: '💎', rotation: -360, scale: 1.2 },
  { emoji: '🌟', rotation: 1440, scale: 1.0 },
];

export const AnimatedLogo: React.FC = () => {
  const [currentLogo, setCurrentLogo] = useState(0);
  const [isAnimating, setIsAnimating] = useState(false);

  useEffect(() => {
    const interval = setInterval(() => {
      setIsAnimating(true);
      setTimeout(() => {
        setCurrentLogo((prev) => (prev + 1) % logoVariants.length);
        setIsAnimating(false);
      }, 500);
    }, 5000);

    return () => clearInterval(interval);
  }, []);

  const logo = logoVariants[currentLogo];

  return (
    <span 
      className="inline-block text-4xl transition-all duration-700 ease-in-out"
      style={{
        transform: isAnimating 
          ? `rotate(${logo.rotation}deg) scale(0)` 
          : `rotate(0deg) scale(${logo.scale})`,
        opacity: isAnimating ? 0 : 1,
      }}
    >
      {logo.emoji}
    </span>
  );
};