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

interface Step1IntroPageProps {
  onNext: () => void;
}

export default function Step1IntroPage({ onNext }: Step1IntroPageProps) {
  return (
    <>
      <ExperimentTitle
        title="01实验工具介绍"
        description="以下是实验所需要的所有工具，让我们来看看具体有哪些吧"
      />

      {/* img列表 */}
      <div className="grid grid-cols-4 gap-y-20 gap-x-20 mt-10">
        {sensorImages.map((image, index) => (
          <div key={index} className="flex flex-col items-center">
            <Image
              src={image.src}
              className="w-80 h-50 rounded-lg shadow-md mb-4 object-cover"
            />
            <div className="text-center text-xl">
              <h3 className=" font-bold text-gray-800 mb-1">{image.name}</h3>
              <p className=" text-gray-600">{image.description}</p>
            </div>
          </div>
        ))}
      </div>

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