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

interface DotLoadingProps {
  isActive: boolean;
  color?: string;
  size?: 'small' | 'medium' | 'large';
}

export const DotLoading: React.FC<DotLoadingProps> = ({ 
  isActive, 
  color = '#ffffff',
  size = 'small'
}) => {
  if (!isActive) return null;

  const dotSize = {
    small: 'w-1 h-1',
    medium: 'w-1.5 h-1.5',
    large: 'w-2 h-2'
  }[size];

  return (
    <div className="flex space-x-1">
      {[0, 1, 2].map((i) => (
        <motion.div
          key={i}
          className={`rounded-full ${dotSize}`}
          style={{ backgroundColor: color }}
          animate={{
            scale: [1, 1.5, 1],
            opacity: [1, 0.5, 1]
          }}
          transition={{
            duration: 1,
            repeat: Infinity,
            delay: i * 0.2
          }}
        />
      ))}
    </div>
  );
};