import React from "react";
import WizardField from "./wizardFields";

const WizardStepRenderer = ({
  step,
  questions,
  answers,
  onAnswerChange,
  validationErrors,
  isProActive,
}) => {
  return (
    <div className="arraysubs-setup-wizard__body">
      <div className="arraysubs-setup-wizard__step-header">
        <h3 className="arraysubs-setup-wizard__step-title">{step.title}</h3>
        {step.description && (
          <p className="arraysubs-setup-wizard__step-description">
            {step.description}
          </p>
        )}
      </div>

      <div className="arraysubs-setup-wizard__questions">
        {questions.map((question) => (
          <WizardField
            key={question.key}
            question={question}
            value={answers[question.key]}
            onChange={(nextValue) => onAnswerChange(question.key, nextValue)}
            error={validationErrors[question.key]}
            isProActive={isProActive}
          />
        ))}
      </div>
    </div>
  );
};

export default WizardStepRenderer;