import { useState, useEffect } from "react"
import { motion } from "framer-motion"
import "./LoadingScreen.css"

const LoadingScreen = () => {
  const [particles, setParticles] = useState([])

  useEffect(() => {
    
    const newParticles = Array.from({ length: 10 }, (_, i) => ({
      id: i,
      x: Math.random() * window.innerWidth,
      y: Math.random() * window.innerHeight,
      duration: 3 + Math.random() * 2,
      delay: Math.random() * 2
    }))
    setParticles(newParticles)
  }, [])

  return (
    <motion.div
      className="loading-screen"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      transition={{ duration: 0.5 }}
    >
      
      <div className="loading-content">

        <motion.div
          className="loading-logo"
          initial={{ scale: 0 }}
          animate={{ scale: 1 }}
          transition={{
            duration: 0.8,
            ease: "easeOut",
            delay: 0.2,
          }}
        >
                    <div className="logo-rings">
            <div className="ring ring-1"></div>
            <div className="ring ring-2"></div>
            <div className="ring ring-3"></div>
          </div>
          <motion.h1
            className="loading-title gradient-text"
            initial={{ y: 20, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            transition={{ delay: 0.8, duration: 0.6 }}
          >
            MKCart
          </motion.h1>
        </motion.div>

        <motion.div
          className="loading-bar-container"
          initial={{ width: 0 }}
          animate={{ width: "300px" }}
          transition={{ delay: 1, duration: 0.8 }}
        >
          <div className="loading-bar">
            <motion.div
              className="loading-progress"
              initial={{ width: "0%" }}
              animate={{ width: "100%" }}
              transition={{
                delay: 1.2,
                duration: 1.5,
                ease: "easeInOut",
              }}
            />
          </div>
        </motion.div>
       
        <motion.p
          className="loading-text"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 1.5, duration: 0.5 }}
        >
          Welcome to MKCart💖
        </motion.p>
      </div>

      <div className="loading-particles">
        {particles.map((particle) => (
          <motion.div
            key={particle.id}
            className="particle"
            initial={{
              x: particle.x,
              y: particle.y,
              opacity: 0,
            }}
            animate={{
              opacity: [0, 1, 0],
            }}
            transition={{
              duration: particle.duration,
              repeat: Number.POSITIVE_INFINITY,
              delay: particle.delay,
            }}
          />
        ))}
      </div>
    </motion.div>
  )
}

export default LoadingScreen