import React, { useState, useEffect } from 'react';
import { motion, useAnimation } from 'framer-motion';

const Step = ({ step, index, isActive }) => {
    const controls = useAnimation();

    useEffect(() => {
        if (isActive) {
            controls.start({ opacity: 1, x: 0 });
        } else {
            controls.start({ opacity: 0.5, x: -20 });
        }
    }, [isActive, controls]);

    return (
        <motion.div
            key={index}
            className="flex gap-8 items-start h-40"
            initial={{ opacity: 0.5, x: -20 }}
            animate={controls}
            transition={{ duration: 0.5 }}
        >
            <div className="flex-shrink-0 w-12 h-12 rounded-full bg-blue-600 bg-opacity-50 flex items-center justify-center text-xl font-bold">
                {index + 1}
            </div>
            <div>
                <h3 className="text-2xl font-bold mb-2">{step.title}</h3>
                <p className="text-gray-300">{step.description}</p>
                {/* Optional Call-to-action or additional details */}
                {/* 
                <button className="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded mt-auto">
                    Learn More
                </button> 
                */}
            </div>
        </motion.div>
    );
};

const HowItWorks = ({ steps }) => {
    const [activeStep, setActiveStep] = useState(0);
    const containerRef = React.createRef();

    // Optional Progress Bar for Steps
    // You can implement this as a separate component or inline here.

    return (
        <section ref={containerRef} className="container max-w-6xl mx-auto px-[15px] py-[60px] md:p-[30px] lg:p-[60px] xl:p-[80px]">
            
          {/* Title Section */}
          <h2 className="text-center text-[32px] md:text-[40px] lg:text-[48px] mb-[40px]" id='how-it-work'>How It Works</h2>

          {/* Steps Container */}
          <div className="space-y-[60px]" id='steps'>
              {steps.map((step, index) => (
                  <motion.div 
                      key={index} 
                      data-index={index} 
                      className={`relative step ${activeStep === index ? 'active' : ''}`}
                      onMouseEnter={() => setActiveStep(index)} // Change active step on hover
                      onMouseLeave={() => setActiveStep(0)} // Reset to first step when not hovering
                  >
                      {/* Render the Step Component here */}
                      <Step step={step} index={index} isActive={activeStep === index} />
                  </motion.div>
              ))}
          </div>

      </section>
    );
};

export default HowItWorks;