1import { useState } from 'react';
2
3const STEPS = ['Личные данные', 'Адрес', 'Оплата', 'Подтверждение'];
4
5function MultiStepForm({ onComplete }) {
6  const [currentStep, setCurrentStep] = useState(0);
7  const [isLoading, setIsLoading] = useState(false);
8  const [stepData, setStepData] = useState({});
9  const [errors, setErrors] = useState({});
10  const [completedSteps, setCompletedSteps] = useState([]);
11
12  async function handleNext(data) {
13    setIsLoading(true);
14    setErrors({});
15
16    const result = await validateStep(currentStep, data);
17
18    if (result.valid) {
19      setStepData({ ...stepData, [currentStep]: data });
20      setCompletedSteps([...completedSteps, currentStep]);
21      setCurrentStep(currentStep + 1);
22      setIsLoading(false);
23    } else {
24      setErrors(result.errors);
25      setIsLoading(false);
26    }
27  }
28
29  function handleBack() {
30    setCurrentStep(currentStep - 1);
31    setErrors({});
32  }
33
34  async function handleSubmit() {
35    setIsLoading(true);
36    await onComplete(stepData);
37    setIsLoading(false);
38  }
39
40  return (
41    <div>
42      <p>Шаг {currentStep + 1} из {STEPS.length}: {STEPS[currentStep]}</p>
43      <StepContent
44        step={currentStep}
45        data={stepData[currentStep]}
46        errors={errors}
47        onSubmit={handleNext}
48      />
49      <button onClick={handleBack} disabled={currentStep === 0 || isLoading}>
50        Назад
51      </button>
52      {currentStep === STEPS.length - 1 && (
53        <button onClick={handleSubmit} disabled={isLoading}>Завершить</button>
54      )}
55    </div>
56  );
57}