"use client"

import { useEffect, useState } from "react"
import { motion, useMotionValue, useSpring } from "framer-motion"

export function CursorGlow() {
  const [visible, setVisible] = useState(false)
  const mouseX = useMotionValue(-400)
  const mouseY = useMotionValue(-400)

  const springX = useSpring(mouseX, { stiffness: 80, damping: 20, mass: 0.5 })
  const springY = useSpring(mouseY, { stiffness: 80, damping: 20, mass: 0.5 })

  useEffect(() => {
    const handler = (e: MouseEvent) => {
      mouseX.set(e.clientX)
      mouseY.set(e.clientY)
      if (!visible) setVisible(true)
    }
    window.addEventListener("mousemove", handler, { passive: true })
    return () => window.removeEventListener("mousemove", handler)
  }, [visible, mouseX, mouseY])

  return (
    <div className="pointer-events-none fixed inset-0 z-[10] hidden lg:block overflow-hidden">
      <motion.div
        className="absolute rounded-full"
        style={{
          width: 500,
          height: 500,
          x: springX,
          y: springY,
          translateX: "-50%",
          translateY: "-50%",
          background: "radial-gradient(circle, rgba(99,102,241,0.07) 0%, rgba(139,92,246,0.04) 40%, transparent 70%)",
          opacity: visible ? 1 : 0,
        }}
      />
    </div>
  )
}