1  import React from 'react';
 2  import { LucideIcon } from 'lucide-react';
 3  import styles from './styles.module.css';
 4  import ImageBox from '../ImageBox';
 5  
 6  interface WorkflowStep {
 7    title: string;
 8    description: string | React.ReactNode;
 9    icon?: LucideIcon;
10  }
11  
12  interface WorkflowStepsProps {
13    steps: WorkflowStep[];
14    title?: string;
15    screenshot?: {
16      src: string;
17      alt: string;
18      width?: string;
19    };
20    width?: 'normal' | 'wide';
21  }
22  
23  const WorkflowSteps: React.FC<WorkflowStepsProps> = ({ steps, title, screenshot, width = 'normal' }) => {
24    return (
25      <div className={styles.workflowContainer}>
26        {title && <h3 className={styles.workflowTitle}>{title}</h3>}
27        {screenshot && (
28          <div className={styles.screenshotContainer}>
29            <ImageBox src={screenshot.src} alt={screenshot.alt} width={screenshot.width || '90%'} />
30          </div>
31        )}
32        <div className={styles.stepsContainer} style={{ maxWidth: width === 'wide' ? '850px' : '700px' }}>
33          {steps.map((step, index) => (
34            <div key={index} className={styles.stepItem}>
35              <div className={styles.stepIndicator}>
36                <div className={styles.stepNumber}>
37                  {step.icon ? <step.icon size={16} /> : <span className={styles.stepNumberText}>{index + 1}</span>}
38                </div>
39                {index < steps.length - 1 && <div className={styles.stepConnector} />}
40              </div>
41              <div className={styles.stepContent}>
42                <h4 className={styles.stepTitle}>{step.title}</h4>
43                <p className={styles.stepDescription}>{step.description}</p>
44              </div>
45            </div>
46          ))}
47        </div>
48      </div>
49    );
50  };
51  
52  export default WorkflowSteps;