Animated Process List Lovable

export default function AnimatedProcessListExample() {
  const [isAnimating, setIsAnimating] = useState(false)
  const [animationSpeed, setAnimationSpeed] = useState<'slow' | 'normal' | 'fast'>('normal')

  const handleAnimationEnd = () => {
    console.log('Animation completed')
    setIsAnimating(false)
  }

  const handleStartAnimation = () => {
    setIsAnimating(true)
  }

  return (
    <div className="space-y-6">
      <div className="flex gap-4 items-center">
        <button
          onClick={handleStartAnimation}
          className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
        >
          Start Animation
        </button>
        <select
          value={animationSpeed}
          onChange={(e) => setAnimationSpeed(e.target.value as 'slow' | 'normal' | 'fast')}
          className="px-3 py-2 border rounded-lg"
        >
          <option value="slow">Slow</option>
          <option value="normal">Normal</option>
          <option value="fast">Fast</option>
        </select>
      </div>

      <AnimatedProcessList_Lovable
        title="Processing your request..."
        lines={[
          {
            icon: <CheckCircle className="w-5 h-5 text-green-600 dark:text-green-400" />,
            content: "Analyzing user input and context requirements",
          },
          {
            icon: <Settings className="w-5 h-5 text-blue-600 dark:text-blue-400" />,
            content: "Configuring system parameters and preferences",
          },
          {
            icon: <FileText className="w-5 h-5 text-yellow-600 dark:text-yellow-400" />,
            content: "Gathering relevant data and documentation",
          },
          {
            icon: <Paintbrush className="w-5 h-5 text-pink-600 dark:text-pink-400" />,
            content: "Applying custom styling and branding",
          },
          {
            icon: <Sparkles className="w-5 h-5 text-purple-600 dark:text-purple-400" />,
            content: "Generating personalized recommendations",
          },
          {
            icon: <Moon className="w-5 h-5 text-gray-600 dark:text-gray-400" />,
            content: "Optimizing for dark mode and accessibility",
          },
          {
            icon: <Gauge className="w-5 h-5 text-orange-600 dark:text-orange-400" />,
            content: "Finalizing performance optimizations",
          },
        ]}
        animationSpeed={animationSpeed}
        onAnimationEnd={handleAnimationEnd}
        scrollDirection="up"
        skeletonDuration={1500}
        lineRevealDelay={200}
        className="w-full max-w-lg"
      />
    </div>
  )
}

interface ProcessLine {
  icon: React.ReactNode
  content: string
}

interface AnimatedProcessList_LovableProps {
  title?: string
  lines?: ProcessLine[]
  className?: string
  scrollDirection?: "up" | "down"
  animationSpeed?: "slow" | "normal" | "fast"
  onAnimationEnd?: () => void
  skeletonDuration?: number
  lineRevealDelay?: number
  stepIcons?: React.ReactNode[]
}