"use client"
 
import React, { useEffect, useRef } from "react"
import { motion } from "framer-motion"
import { useTheme } from "next-themes"
 
const NetworkBackground: React.FC<{ className?: string }> = ({ className }) => {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const { theme } = useTheme()
 
  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return
 
    const ctx = canvas.getContext("2d")
    if (!ctx) return
 
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
 
    const particles: Particle[] = []
    const particleCount = 100
    const connectionDistance = 150
 
    class Particle {
      x: number
      y: number
      size: number
      speedX: number
      speedY: number
 
      constructor() {
        this.x = Math.random() * canvas.width
        this.y = Math.random() * canvas.height
        this.size = Math.random() * 3 + 1
        this.speedX = Math.random() * 3 - 1.5
        this.speedY = Math.random() * 3 - 1.5
      }
 
      update() {
        this.x += this.speedX
        this.y += this.speedY
 
        if (this.x > canvas.width) this.x = 0
        else if (this.x < 0) this.x = canvas.width
        if (this.y > canvas.height) this.y = 0
        else if (this.y < 0) this.y = canvas.height
      }
 
      draw(color: string) {
        ctx!.fillStyle = color
        ctx!.beginPath()
        ctx!.arc(this.x, this.y, this.size, 0, Math.PI * 2)
        ctx!.fill()
      }
    }
 
    for (let i = 0; i < particleCount; i++) {
      particles.push(new Particle())
    }
 
    function animate() {
      ctx!.clearRect(0, 0, canvas.width, canvas.height)
 
      const particleColor = "rgba(128, 128, 128, 0.8)" // Changed to gray
      const lineColor = theme === "dark" ? "255, 255, 255" : "0, 0, 0"
 
      for (let i = 0; i < particles.length; i++) {
        particles[i].update()
        particles[i].draw(particleColor)
 
        for (let j = i; j < particles.length; j++) {
          const dx = particles[i].x - particles[j].x
          const dy = particles[i].y - particles[j].y
          const distance = Math.sqrt(dx * dx + dy * dy)
 
          if (distance < connectionDistance) {
            ctx!.strokeStyle = `rgba(${lineColor}, ${
              1 - distance / connectionDistance
            })`
            ctx!.lineWidth = 1
            ctx!.beginPath()
            ctx!.moveTo(particles[i].x, particles[i].y)
            ctx!.lineTo(particles[j].x, particles[j].y)
            ctx!.stroke()
          }
        }
      }
 
      requestAnimationFrame(animate)
    }
 
    animate()
 
    const handleResize = () => {
      canvas.width = window.innerWidth
      canvas.height = window.innerHeight
    }
 
    window.addEventListener("resize", handleResize)
 
    return () => {
      window.removeEventListener("resize", handleResize)
    }
  }, [theme])
 
  const bgClass =
    theme === "dark"
      ? "bg-gradient-to-br from-gray-900 to-gray-800"
      : "bg-gradient-to-br from-gray-100 to-white"
 
  return (
    <motion.div
      className={`absolute inset-0 ${className}`}
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 1 }}
    >
      <canvas ref={canvasRef} className={`w-full h-full ${bgClass}`} />
    </motion.div>
  )
}
 
export NetworkBackground