import { Image } from "@/components";
import { getStaticImage } from "@/utils";
import ExperimentTitle from "./ExperimentTitle";

interface Step3ConfigPageProps {
  onNext?: () => void;
}

export default function Step3ConfigPage({ onNext }: Step3ConfigPageProps) {
  return (
    <>
      <ExperimentTitle
        title="03实验环境配置"
        description="配置实验所需的软件和硬件环境，确保实验能够顺利进行。"
      />

      {/* 主要内容区域 */}
      <div className="mt-10">
        <div className="bg-white/80 backdrop-blur-sm rounded-lg p-8 shadow-lg">
          <h3 className="text-2xl font-bold text-gray-800 mb-6">
            环境配置步骤
          </h3>

          <div className="space-y-6">
            <div className="flex items-start gap-4">
              <div className="flex-shrink-0 w-10 h-10 bg-[#3d98cd] text-white rounded-full flex items-center justify-center font-bold text-lg">
                1
              </div>
              <div className="flex-1">
                <h4 className="text-xl font-semibold text-gray-800 mb-2">
                  安装 Keil 软件
                </h4>
                <p className="text-gray-600">
                  下载并安装 Keil μVision IDE，用于编写和编译 STM32 程序。
                </p>
              </div>
            </div>

            <div className="flex items-start gap-4">
              <div className="flex-shrink-0 w-10 h-10 bg-[#3d98cd] text-white rounded-full flex items-center justify-center font-bold text-lg">
                2
              </div>
              <div className="flex-1">
                <h4 className="text-xl font-semibold text-gray-800 mb-2">
                  连接 STM32 主控板
                </h4>
                <p className="text-gray-600">
                  使用烧录线将 STM32 主控板连接到电脑，确保驱动正常安装。
                </p>
              </div>
            </div>

            <div className="flex items-start gap-4">
              <div className="flex-shrink-0 w-10 h-10 bg-[#3d98cd] text-white rounded-full flex items-center justify-center font-bold text-lg">
                3
              </div>
              <div className="flex-1">
                <h4 className="text-xl font-semibold text-gray-800 mb-2">
                  配置传感器连接
                </h4>
                <p className="text-gray-600">
                  将力敏传感器正确连接到 STM32 主控板的指定引脚。
                </p>
              </div>
            </div>

            <div className="flex items-start gap-4">
              <div className="flex-shrink-0 w-10 h-10 bg-[#3d98cd] text-white rounded-full flex items-center justify-center font-bold text-lg">
                4
              </div>
              <div className="flex-1">
                <h4 className="text-xl font-semibold text-gray-800 mb-2">
                  烧录程序
                </h4>
                <p className="text-gray-600">
                  在 Keil 中编译程序，并通过烧录线将程序下载到 STM32 主控板。
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 底部提示和下一步按钮 */}
      <div className="text-center mt-10">
        <p className="text-blue-400 text-2xl font-semibold mb-6">
          完成以上步骤后，即可进入下一阶段的实验操作。
        </p>
      </div>

      {onNext && (
        <div onClick={onNext}>
          <Image
            className="absolute bottom-4 right-6 cursor-pointer"
            src={getStaticImage("components/按钮-下一步.png")}
            button={true}
          />
        </div>
      )}
    </>
  );
}