// Advanced Transitions Component
import { motion } from 'framer-motion'
import { useState } from 'react'

interface TransitionDemoProps {
  theme?: 'light' | 'dark'
}

export default function TransitionDemo({ theme = 'dark' }: TransitionDemoProps) {
  const [activeEasing, setActiveEasing] = useState(0)
  
  const easingTypes = [
    { name: 'Ease', value: 'easeInOut', description: 'Smooth start and end' },
    { name: 'Bounce', value: [0.68, -0.55, 0.265, 1.55], description: 'Bouncy overshoot' },
    { name: 'Spring', value: { type: 'spring', stiffness: 300, damping: 30 }, description: 'Natural spring physics' },
    { name: 'Elastic', value: { type: 'spring', stiffness: 400, damping: 10 }, description: 'Elastic spring effect' }
  ]

  return (
    <div className="space-y-6">
      {/* Easing Controls */}
      <div className="flex justify-center">
        <div className="flex border rounded-lg overflow-hidden">
          {easingTypes.map((easing, index) => (
            <button
              key={easing.name}
              onClick={() => setActiveEasing(index)}
              className={`px-4 py-2 text-sm font-medium transition-all duration-200 ${
                activeEasing === index
                  ? 'bg-ui-primary-500 text-black'
                  : theme === 'dark'
                    ? 'bg-ui-bg-800 text-white hover:bg-ui-bg-700'
                    : 'bg-white text-ui-bg-950 hover:bg-ui-bg-50'
              }`}
            >
              {easing.name}
            </button>
          ))}
        </div>
      </div>

      {/* Animation Demo */}
      <div className="relative h-32 flex items-center justify-center">
        <motion.div
          key={activeEasing}
          initial={{ x: -100, opacity: 0 }}
          animate={{ x: 0, opacity: 1 }}
          transition={{
            duration: 0.8,
            ease: easingTypes[activeEasing].value
          }}
          className="w-16 h-16 rounded-xl flex items-center justify-center"
          style={{
            backgroundColor: theme === 'dark' ? '#00ff88' : '#00b366'
          }}
        >
          <span className="text-2xl">✨</span>
        </motion.div>
      </div>

      {/* Description */}
      <div className="text-center">
        <h3 className="font-semibold mb-2">{easingTypes[activeEasing].name} Transition</h3>
        <p className="text-sm opacity-80">{easingTypes[activeEasing].description}</p>
      </div>
    </div>
  )
}

// Page Transition Component
export function PageTransition({ children, isVisible = true }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ 
        opacity: isVisible ? 1 : 0, 
        y: isVisible ? 0 : 20 
      }}
      exit={{ opacity: 0, y: -20 }}
      transition={{ 
        duration: 0.3, 
        ease: 'easeOut'
      }}
    >
      {children}
    </motion.div>
  )
}