import Date from "./date";

// Components
import Content from "./Content";
import Layout from "@/components/layout";
import Paying from "@/components/appointment/paying";
import Detail from "@/components/appointment/detail";
import FailedPay from "@/components/appointment/failedPay";
import SuccessPay from "@/components/appointment/successPay";

function Container({
  step,
  data,
  doctor,
  setData,
  setStep,
  prevData,
  matchedCity,
  isForAnother,
  setIsForAnother,
}) {
  const elements = [
    <Date doctor={doctor} setStep={setStep} />,
    // <LogInPage setIsSendMsg={false} setStep={setStep} />,
    // <VerificationPage setIsSendMsg={false} link={false} setStep={setStep} />,
    <Detail
      data={data}
      setStep={setStep}
      setData={setData}
      prevData={prevData}
      isForAnother={isForAnother}
      setIsForAnother={setIsForAnother}
    />,
    <Paying setStep={setStep} />,
    <SuccessPay setStep={setStep} />,
    <FailedPay setStep={setStep} />,
  ];

  return (
    <>
      {/* {step === 1 || step === 2 ? (
        <RegisterPage>{elements[step]}</RegisterPage>
      ) : ( */}
      <Layout
        title="رزرو"
        name="booking"
        disableFooter={step > 2}
        matchedCity={matchedCity}
        paddingBottom="pb-[80px]"
      >
        <Content
          disableSide={step === 5 || step === 6}
          isFirst={step === 0}
          setStep={setStep}
          doctor={doctor}
          step={step}
        >
          {elements[step]}
        </Content>
      </Layout>
      {/* )} */}
    </>
  );
}

export default Container;