'use client'

import React, { useState, useEffect } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { cn } from '@/lib/utils'

const CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+'

export function CyberpunkGlitchText({ text = "CYBERPUNK_V2", className }: { text?: string, className?: string }) {
  const [displayText, setDisplayText] = useState(text)
  const [isHovered, setIsHovered] = useState(false)

  useEffect(() => {
    let interval: NodeJS.Timeout
    if (isHovered) {
      interval = setInterval(() => {
        setDisplayText(prev => 
          prev.split('').map((char, i) => {
            if (Math.random() < 0.1) return CHARS[Math.floor(Math.random() * CHARS.length)]
            return text[i]
          }).join('')
        )
      }, 50)
    } else {
      setDisplayText(text)
    }
    return () => clearInterval(interval)
  }, [isHovered, text])

  return (
    <div 
      className={cn("relative inline-block cursor-default font-mono font-bold text-6xl text-white select-none", className)}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <div className="relative z-10">{displayText}</div>
      
      {isHovered && (
        <>
          <motion.div 
            className="absolute top-0 left-0 text-red-500 opacity-70 z-0"
            animate={{ x: [-2, 2, -1, 0], y: [1, -1, 0] }}
            transition={{ repeat: Infinity, duration: 0.2 }}
          >
            {displayText}
          </motion.div>
          <motion.div 
            className="absolute top-0 left-0 text-cyan-500 opacity-70 z-0"
            animate={{ x: [2, -2, 1, 0], y: [-1, 1, 0] }}
            transition={{ repeat: Infinity, duration: 0.2 }}
          >
            {displayText}
          </motion.div>
        </>
      )}
    </div>
  )
}