// Fade In/Out Animation Component
import { motion, AnimatePresence } from 'framer-motion'
import { ReactNode, useState, useEffect } from 'react'

interface FadeAnimationProps {
  children: ReactNode
  variant: 'fade' | 'slide-fade' | 'scale-fade'
  isVisible: boolean
  delay?: number
  className?: string
}

function FadeAnimation({ 
  children, 
  variant, 
  isVisible, 
  delay = 0,
  className = ''
}: FadeAnimationProps) {
  const variants = {
    fade: {
      initial: { opacity: 0 },
      animate: { opacity: 1 },
      exit: { opacity: 0 }
    },
    'slide-fade': {
      initial: { opacity: 0, y: 20 },
      animate: { opacity: 1, y: 0 },
      exit: { opacity: 0, y: -20 }
    },
    'scale-fade': {
      initial: { opacity: 0, scale: 0.8 },
      animate: { opacity: 1, scale: 1 },
      exit: { opacity: 0, scale: 0.8 }
    }
  }

  const currentVariant = variants[variant]

  return (
    <AnimatePresence>
      {isVisible && (
        <motion.div
          className={className}
          initial={currentVariant.initial}
          animate={currentVariant.animate}
          exit={currentVariant.exit}
          transition={{ 
            duration: 0.5, 
            delay,
            ease: 'easeOut'
          }}
        >
          {children}
        </motion.div>
      )}
    </AnimatePresence>
  )
}

// Interactive Showcase
export function FadeInOutShowcase({ theme = 'dark' }) {
  const [visible, setVisible] = useState(true)

  useEffect(() => {
    const interval = setInterval(() => {
      setVisible(prev => !prev)
    }, 3000)
    return () => clearInterval(interval)
  }, [])

  const cards = [
    { variant: 'fade' as const, title: 'Simple Fade', delay: 0 },
    { variant: 'slide-fade' as const, title: 'Slide + Fade', delay: 0.1 },
    { variant: 'scale-fade' as const, title: 'Scale + Fade', delay: 0.2 }
  ]

  return (
    <div className="space-y-6">
      <div className="text-center">
        <button
          onClick={() => setVisible(!visible)}
          className="px-4 py-2 rounded-lg border transition-colors"
          style={{
            borderColor: theme === 'dark' ? '#334155' : '#e2e8f0',
            backgroundColor: theme === 'dark' ? '#1e293b' : '#ffffff'
          }}
        >
          Toggle Animations
        </button>
      </div>
      
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {cards.map((card) => (
          <FadeAnimation
            key={card.variant}
            variant={card.variant}
            isVisible={visible}
            delay={card.delay}
            className="p-6 rounded-xl border"
            style={{
              backgroundColor: theme === 'dark' ? '#1e293b' : '#ffffff',
              borderColor: theme === 'dark' ? '#334155' : '#e2e8f0'
            }}
          >
            <h3 className="text-lg font-semibold mb-2">{card.title}</h3>
            <p className="text-sm opacity-80">
              Smooth {card.variant.replace('-', ' and ')} animation
            </p>
          </FadeAnimation>
        ))}
      </div>
    </div>
  )
}