// Hover Effects Component
import { motion } from 'framer-motion'
import { ReactNode, useState } from 'react'

interface HoverEffectCardProps {
  children: ReactNode
  effect: 'scale' | 'rotate' | 'skew' | 'glow' | 'slide'
  className?: string
  theme?: 'light' | 'dark'
}

function HoverEffectCard({ 
  children, 
  effect, 
  className = '',
  theme = 'dark' 
}: HoverEffectCardProps) {
  const [isHovered, setIsHovered] = useState(false)
  
  const hoverVariants = {
    scale: { scale: 1.1 },
    rotate: { rotate: 6 },
    skew: { skewY: 3 },
    glow: { 
      boxShadow: theme === 'dark' 
        ? '0 25px 50px -12px rgba(0, 255, 136, 0.4)' 
        : '0 25px 50px -12px rgba(0, 150, 100, 0.4)'
    },
    slide: { y: -10 }
  }

  return (
    <motion.div
      className={`relative overflow-hidden rounded-xl border cursor-pointer transition-all duration-300 ${className}`}
      style={{
        backgroundColor: theme === 'dark' ? '#1e293b' : '#ffffff',
        borderColor: theme === 'dark' ? '#334155' : '#e2e8f0'
      }}
      whileHover={hoverVariants[effect]}
      transition={{ duration: 0.2, ease: 'easeOut' }}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <div className="p-6">
        {children}
      </div>
      
      {/* Hover overlay */}
      <motion.div
        className="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent"
        initial={{ x: '-100%' }}
        animate={{ x: isHovered ? '100%' : '-100%' }}
        transition={{ duration: 0.6 }}
      />
    </motion.div>
  )
}

// Showcase Component
export function HoverEffectsShowcase({ theme = 'dark' }) {
  const effects = [
    { type: 'scale' as const, name: 'Scale', icon: '📏', description: 'Smooth scaling on hover' },
    { type: 'rotate' as const, name: 'Rotate', icon: '🔄', description: 'Subtle rotation effect' },
    { type: 'skew' as const, name: 'Skew', icon: '📐', description: 'Dynamic skew transform' },
    { type: 'glow' as const, name: 'Glow', icon: '✨', description: 'Glowing shadow effect' }
  ]

  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
      {effects.map((effect) => (
        <HoverEffectCard key={effect.type} effect={effect.type} theme={theme}>
          <div className="text-center">
            <div className="text-2xl mb-2">{effect.icon}</div>
            <h3 className="font-semibold mb-1">{effect.name}</h3>
            <p className="text-sm opacity-80">{effect.description}</p>
          </div>
        </HoverEffectCard>
      ))}
    </div>
  )
}