Untitled

import React from "react";
import { router } from "expo-router";
import {
  View,
  SafeAreaView,
  ScrollView,
} from "react-native";
import ListOption from "../../components/ListOption";
import OnboardingPageTitle from "../../components/OnboardingPageTitle";
import OnboardingFooter from "../../components/OnboardingFooter";
import OnboardingHeader from "../../components/OnboardingHeader";


// TODO navigate to right page
const handleNext = () => {
  router.push("/2-venue-what-your-venue-offer");
};

const handlePrev = () => {
  router.back();
};

// TODO change the options depending on options needed in this page
// add icon or image field if needed.
const options = [
  { name: "Less than 100" },
];


// TODO change the title to match the title of the page
const TITLE = "Tell us a bit more about your venue type";
const EXTRA_DESCRIPTION = "Pick the one that best describes your venue.";


// TODO change the name of this function depending on the page
const VenueHowManyPeople = () => {
  return (
    <SafeAreaView className="flex-1 mt-6">

    {/*This is the header view*/}
      <View>
        <OnboardingHeader />
        <OnboardingPageTitle title={TITLE}/>
      </View>

      {/*This is the main view*/}
      <View>

      </View>


      {/*Add a spacing view*/}
      {/*This is the footer view*/}
      {/*Update the progress*/}
      <OnboardingFooter
        handleNext={handleNext}
        handlePrev={handlePrev}
        progress={"30%"}
      />

    </SafeAreaView>
  );
};

// TODO change this to match  how you renamed the function above
export default VenueHowManyPeople;