import { Container } from "reactstrap";
import Header from "../components/Header";
import AddressStep from "../components/steps/address/AddressStep";
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 { StepperWizard } from "../components/providers/StepperProvider";
import CompleteStep from "../components/steps/complete/CompleteStep";
import { useFilter } from "../components/providers/FilterProvider";

const ApplyPage = () => {
  const { submit } = useFilter();

  return (
    <Container fluid className="main-container p-0">
      <Header />
      <StepperWizard>
        <AddressStep label="Enter address" tooltip="Enter your address" />
        <SoilStep label="Choose soil" tooltip="Describe the moisture content of your soil" />
        <HabitatStep label="Choose habitat" tooltip="Specify type of landscape to be planted" />
        <ZoneStep label="Select zone" tooltip="Specify geographical detail" />
        <SummaryStep label="Summary" tooltip="Check your inputs" onSubmit={submit} />
        <CompleteStep label="Complete" tooltip="Complete your application" />
      </StepperWizard>
    </Container>);
};

export default ApplyPage;