import type { ReactNode } from 'react';

interface Step {
  title: string;
  content: ReactNode;
}

interface StepGuideProps {
  steps: Step[];
}

export function StepGuide({ steps }: StepGuideProps) {
  return (
    <div className="space-y-0 my-6">
      {steps.map((step, index) => (
        <div key={index} className="flex gap-4">
          <div className="flex flex-col items-center">
            <div className="w-8 h-8 rounded-full bg-accent text-white flex items-center justify-center text-sm font-bold flex-shrink-0">
              {index + 1}
            </div>
            {index < steps.length - 1 && (
              <div className="w-0.5 flex-1 bg-accent/20 mt-2" />
            )}
          </div>
          <div className="pb-8 flex-1 min-w-0">
            <h4 className="font-semibold text-text-primary mb-2">{step.title}</h4>
            <div className="text-sm text-text-secondary">{step.content}</div>
          </div>
        </div>
      ))}
    </div>
  );
}