import { motion } from "framer-motion";

export function RecipeDetailLoader() {
  return (
    <div className="flex flex-col items-center justify-center py-12">
      <div className="relative w-24 h-24">
        {/* Pot */}
        <div className="absolute inset-0 flex items-center justify-center">
          <div className="w-20 h-16 bg-gray-600 rounded-b-xl"></div>
          <div className="absolute top-0 w-24 h-4 bg-gray-500 rounded-t-xl"></div>
        </div>

        {/* Bubbling animation */}
        <motion.div
          className="absolute top-6 left-8 w-3 h-3 bg-blue-300 rounded-full"
          animate={{
            y: [0, -15, -5],
            opacity: [0.7, 1, 0]
          }}
          transition={{
            duration: 1.5,
            repeat: Infinity,
            repeatType: "loop"
          }}
        />

        <motion.div
          className="absolute top-6 left-14 w-2 h-2 bg-blue-300 rounded-full"
          animate={{
            y: [0, -10, -2],
            opacity: [0.7, 1, 0]
          }}
          transition={{
            duration: 1.2,
            repeat: Infinity,
            repeatType: "loop",
            delay: 0.3
          }}
        />

        <motion.div
          className="absolute top-6 left-11 w-4 h-4 bg-blue-300 rounded-full"
          animate={{
            y: [0, -20, -5],
            opacity: [0.7, 1, 0]
          }}
          transition={{
            duration: 1.8,
            repeat: Infinity,
            repeatType: "loop",
            delay: 0.5
          }}
        />

        {/* Spoon stirring animation */}
        <motion.div
          className="absolute top-2 left-10 w-2 h-14 bg-gray-300 origin-bottom"
          animate={{ rotate: [-20, 20, -20] }}
          transition={{
            duration: 1.5,
            repeat: Infinity,
            repeatType: "reverse",
            ease: "easeInOut"
          }}
        >
          <div className="absolute -top-3 -left-2 w-6 h-3 bg-gray-300 rounded-full"></div>
        </motion.div>
      </div>
      <p className="mt-4 text-center font-medium">Préparation de votre recette...</p>
    </div>
  );
}
