import { BackgroundImage } from "@/components";
import { getStaticImage } from "@/utils";
import { useState } from "react";
import Step1IntroPage from "./Step1IntroPage";
import Step2SelectPage from "./Step2SelectPage";
import Step3ConfigPage from "./Step3ConfigPage";

export default function Experiment() {
  const [step, setStep] = useState(1); // 1: 工具介绍, 2: 工具选择, 3: 实验环境配置

  return (
    <BackgroundImage
      src={getStaticImage("experiment/内容背景页.png")}
      alt="传感器实验首页"
      className="h-full w-full "
    >
      <div className="h-full relative py-20 px-10">
        {step === 1 && <Step1IntroPage onNext={() => setStep(2)} />}
        {step === 2 && <Step2SelectPage onNext={() => setStep(3)} />}
        {step === 3 && <Step3ConfigPage onNext={() => setStep(4)} />}
      </div>
    </BackgroundImage>
  );
}