import React from 'react';

interface StepGuideProps {
  steps: { num: number; title: string; desc: string }[];
  color: string;
}

export const StepGuide: React.FC<StepGuideProps> = ({ steps, color }) => {
  return (
    <ol className="step-guide">
      {steps.map((s, i) => (
        <li className="step-guide-item" key={s.num}>
          <div className="step-guide-rail">
            <span className="step-guide-num" style={{ background: color }}>
              {s.num}
            </span>
            {i < steps.length - 1 && <span className="step-guide-line" />}
          </div>
          <div className="step-guide-body">
            <h4>{s.title}</h4>
            <p>{s.desc}</p>
          </div>
        </li>
      ))}
    </ol>
  );
};

export default StepGuide;