import { Container } from "reactstrap";
import Stepper from "../components/Stepper";
import Header from "../components/Header";
import LocationStep from "../components/steps/location/LocationStep";
import SoilStep from "../components/steps/soilvariant/SoilStep";
import HabitatStep from "../components/steps/habitat/HabitatStep";
import ZoneStep from "../components/steps/zone/ZoneStep";
import SummaryStep from "../components/steps/summary/SummaryStep";
import ResultsStep from "../components/steps/results/ResultsStep";

const MainPage = () => (
  <Container fluid className="main-container p-0">
    <Header />
    <Stepper
      steps={[
        {
          label: "Select location",
          component: LocationStep,
          tooltip: "Click on a location on the map",
        },
        {
          label: "Choose soil",
          component: SoilStep,
          tooltip: "Describe the moisture content of your soil",
        },
        {
          label: "Choose habitat",
          component: HabitatStep,
          tooltip: "Specify type of landscape to be planted",
        },
        {
          label: "Select zone",
          component: ZoneStep,
          tooltip: "Specify geographical detail",
        },
        {
          label: "Summary",
          component: SummaryStep,
          tooltip: "Check your inputs",
        },
        {
          label: "Results",
          component: ResultsStep,
          tooltip: "List of plant species and user guide",
        },
      ]}
    />
  </Container>
);

export default MainPage;
