import { View, Text, TouchableOpacity } from "react-native-ui-lib";
import React from "react";
import { Ionicons } from "@expo/vector-icons";
import { ToDosContextProvider } from "@/contexts/ToDosContext";
import ToDosList from "../todos/ToDosList";
import { ScrollView } from "react-native-gesture-handler";

const ChoreRewardSettings = (props: {
  setSelectedPage: (page: number) => void;
}) => {
  return (
    <ToDosContextProvider>
      <View marginT-10 marginH-20>
        <ScrollView>
          <TouchableOpacity onPress={() => props.setSelectedPage(0)}>
            <View row marginT-20 marginB-35 centerV>
              <Ionicons
                name="chevron-back"
                size={14}
                color="#979797"
                style={{ paddingBottom: 3 }}
              />
              <Text
                style={{ fontFamily: "Poppins_400Regular", fontSize: 14.71 }}
                color="#979797"
              >
                Return to main settings
              </Text>
            </View>
          </TouchableOpacity>
          <Text text60R marginB-20>
            Chore Reward Settings
          </Text>
          <ToDosList isSettings />
        </ScrollView>
      </View>
    </ToDosContextProvider>
  );
};

export default ChoreRewardSettings;
