import { useNavigate } from "react-router-dom";
import initialPageImage from "@/assets/images/初始页.png";
import { BackgroundImage, Image } from "@/components";
import { getStaticImage } from "@/utils";

export default function Home() {
  const navigate = useNavigate();

  const handleStartExperiment = () => {
    console.log("点击开启实验");
    navigate("/experiment");
  };

  return (
    <BackgroundImage
      src={initialPageImage}
      alt="传感器实验首页"
      className="h-full w-full relative"
      backgroundSize="cover"
      backgroundPosition="center"
      onLoad={() => console.log("背景图片加载完成")}
      onError={() => console.log("背景图片加载失败")}
    >
      <Image
        src={getStaticImage("home/按钮-开启实验.png")}
        alt="开始实验按钮"
        className="absolute bottom-10 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
        onClick={handleStartExperiment}
      />
    </BackgroundImage>
  );
}