import React from "react";
import { Box } from "@mui/material";
import { useNavigate } from "react-router-dom";
import Intro from "../components/Intro";
import BenchmarkCreateForm from "../components/BenchmarkCreateForm";
import { useThemeMode } from "../hooks/useThemeMode";
import getTheme from "../config/theme";

function HomePage() {
  const navigate = useNavigate();
  const { mode } = useThemeMode();
  const theme = getTheme(mode);

  const handleStartGeneration = (sid, isDefaultDocument) => {
    navigate(
      `/benchmark-generation?session=${sid}&isDefault=${
        isDefaultDocument ? "true" : "false"
      }`
    );
  };

  return (
    <>
      <Intro />
      <Box
        sx={{
          border: `1px solid ${theme.palette.divider}`,
          borderRadius: 2,
          p: 4,
          bgcolor: "background.paper",
        }}
      >
        <BenchmarkCreateForm onStartGeneration={handleStartGeneration} />
      </Box>
    </>
  );
}

export default HomePage;