import React from "react";
import BasicInfo from "./BasicInfo";
import YourAreAlmostThere from "./YourAreAlmostThere";
import LoanAmountComp from "./LoanAmountComp";
import ApplicantsAttestation from "./ApplicantsAttestation";

const GetStarted = () => {
  const [step, setStep] = React.useState(1);

  const handleNextStep = () => {
    if (step < 4) {
      setStep(step + 1);
    }
  };

  // const handlePreviousStep: React.MouseEvent<HTMLButtonElement> = () => {
  //   setStep(step - 1);
  // };

  const [inputValues, setInputValues] = React.useState({
    title: "",
    marital: "",
    agentId: "",
    bvn: "",
    firstName: "",
    phone: "",
    email: "",
    surname: "",
    dob: "",
    secondName: "",
    spouseBVN: "",
  });

  return (
    <div className="w-full flex items-center justify-center">
      <div className="containerMode">
        {/* Main */}
        <main>
          {step === 1 && (
            <BasicInfo
              inputValues={inputValues}
              setInputValues={setInputValues}
              handleNextStep={handleNextStep}
            />
          )}
          {step === 2 && <YourAreAlmostThere handleNextStep={handleNextStep} />}
          {step === 3 && <LoanAmountComp handleNextStep={handleNextStep} />}
          {step === 4 && <ApplicantsAttestation />}
        </main>
      </div>
    </div>
  );
};

export default GetStarted;