import React from 'react';
import { motion } from 'framer-motion';
import { LucideIcon } from 'lucide-react';

interface IconLoadingProps {
  icon: LucideIcon;
  isActive: boolean;
  color: string;
}

export const IconLoading: React.FC<IconLoadingProps> = ({ icon: Icon, isActive, color }) => {
  if (!isActive) return null;
  
  return (
    <div className="flex items-center space-x-2">
      <motion.div
        animate={{ rotate: [0, 360] }}
        transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
      >
        <Icon className="w-4 h-4" style={{ color }} />
      </motion.div>
      <div className="flex space-x-1">
        {[0, 1, 2].map((i) => (
          <motion.div
            key={i}
            className="w-1 h-1 rounded-full"
            style={{ backgroundColor: color }}
            animate={{
              y: [0, -4, 0],
              opacity: [0.4, 1, 0.4]
            }}
            transition={{
              duration: 1.2,
              repeat: Infinity,
              delay: i * 0.2,
              ease: "easeInOut"
            }}
          />
        ))}
      </div>
    </div>
  );
};