import { motion } from "motion/react";
import { Car, Loader2 } from "lucide-react";

interface LoadingSpinnerProps {
  message?: string;
  showCar?: boolean;
}

export function LoadingSpinner({ message = "Loading...", showCar = false }: LoadingSpinnerProps) {
  return (
    <div className="flex flex-col items-center justify-center py-12 px-4">
      <div className="relative mb-4">
        {showCar ? (
          <motion.div
            className="relative"
            animate={{ 
              x: [-20, 20, -20],
              rotate: [0, 2, -2, 0]
            }}
            transition={{ 
              duration: 2,
              repeat: Infinity,
              ease: "easeInOut"
            }}
          >
            <Car className="h-12 w-12 text-primary" />
            <motion.div
              className="absolute -right-1 -top-1 w-3 h-3 bg-primary/30 rounded-full"
              animate={{ 
                scale: [0.5, 1.2, 0.5],
                opacity: [0.3, 0.8, 0.3]
              }}
              transition={{ 
                duration: 1,
                repeat: Infinity,
                ease: "easeInOut"
              }}
            />
            <motion.div
              className="absolute -left-2 bottom-0 w-2 h-2 bg-primary/20 rounded-full"
              animate={{ 
                scale: [0.3, 0.8, 0.3],
                opacity: [0.2, 0.6, 0.2]
              }}
              transition={{ 
                duration: 1.5,
                repeat: Infinity,
                ease: "easeInOut",
                delay: 0.3
              }}
            />
          </motion.div>
        ) : (
          <motion.div
            animate={{ rotate: 360 }}
            transition={{ 
              duration: 1,
              repeat: Infinity,
              ease: "linear"
            }}
          >
            <Loader2 className="h-8 w-8 text-primary" />
          </motion.div>
        )}
      </div>
      
      <motion.p 
        className="text-muted-foreground text-center max-w-xs"
        animate={{ opacity: [0.6, 1, 0.6] }}
        transition={{ 
          duration: 2,
          repeat: Infinity,
          ease: "easeInOut"
        }}
      >
        {message}
      </motion.p>
      
      {/* Animated dots */}
      <div className="flex gap-1 mt-2">
        {[0, 1, 2].map((index) => (
          <motion.div
            key={index}
            className="w-2 h-2 bg-primary rounded-full"
            animate={{ 
              scale: [0.5, 1, 0.5],
              opacity: [0.3, 1, 0.3]
            }}
            transition={{ 
              duration: 1.5,
              repeat: Infinity,
              delay: index * 0.2
            }}
          />
        ))}
      </div>
    </div>
  );
}