import React from 'react';
import { Slide } from '../../types';
import { motion } from 'framer-motion';
import { ArrowDown, ArrowRight } from 'lucide-react';

export const ProcessSlide: React.FC<{ slide: Slide }> = ({ slide }) => {
  const isDiagram = slide.type === 'diagram';
  const steps = slide.content.steps;

  if (!steps) return null;

  return (
    <div className="flex flex-col h-full justify-center px-6 max-w-6xl mx-auto">
      <h2 className="text-4xl font-bold text-center mb-16 text-slate-900">{slide.title}</h2>

      {isDiagram ? (
        // Horizontal Flow with Icons
        <div className="flex flex-wrap md:flex-nowrap items-center justify-center gap-4 md:gap-2">
            {steps.map((step: any, idx) => (
                <React.Fragment key={idx}>
                    <motion.div
                        className="flex flex-col items-center gap-4 p-6"
                        initial={{ opacity: 0, scale: 0.5 }}
                        animate={{ opacity: 1, scale: 1 }}
                        transition={{ delay: 0.2 + (idx * 0.2) }}
                    >
                         <div className="w-20 h-20 rounded-3xl bg-white border border-slate-100 flex items-center justify-center text-4xl shadow-glow text-slate-700">
                             {step.icon}
                         </div>
                         <span className="text-base font-semibold text-slate-600 text-center">{step.label}</span>
                    </motion.div>
                    
                    {idx < steps.length - 1 && (
                        <motion.div 
                            className="text-slate-300 hidden md:block"
                            initial={{ width: 0, opacity: 0 }}
                            animate={{ width: 'auto', opacity: 1 }}
                            transition={{ delay: 0.3 + (idx * 0.2) }}
                        >
                            <ArrowRight size={24} />
                        </motion.div>
                    )}
                     {idx < steps.length - 1 && (
                        <div className="w-full flex justify-center md:hidden text-slate-300">
                            <ArrowDown size={24} />
                        </div>
                    )}
                </React.Fragment>
            ))}
        </div>
      ) : (
        // Vertical Numbered List
        <div className="max-w-3xl mx-auto w-full">
            {steps.map((step, idx) => (
                <motion.div
                    key={idx}
                    className="flex items-center gap-6 mb-6 relative"
                    initial={{ opacity: 0, x: -30 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ delay: 0.2 + (idx * 0.15) }}
                >
                    <div className="flex-shrink-0 w-12 h-12 rounded-full bg-white border-2 border-secondary text-secondary flex items-center justify-center font-bold text-lg shadow-sm z-10">
                        {idx + 1}
                    </div>
                    {/* Connecting line */}
                    {idx < steps.length - 1 && (
                        <div className="absolute left-6 top-12 bottom-[-24px] w-0.5 bg-slate-200" />
                    )}
                    <div className="bg-white p-5 rounded-xl border border-slate-100 w-full hover:shadow-md transition-all shadow-sm">
                        <p className="text-xl text-slate-700 font-medium">{typeof step === 'string' ? step : (step as any).label}</p>
                    </div>
                </motion.div>
            ))}
        </div>
      )}
    </div>
  );
};