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>
        <ScrollView>
          <TouchableOpacity onPress={() => props.setSelectedPage(0)}>
            <View row marginT-20 marginL-20 marginB-35 centerV>
              <Ionicons name="chevron-back" size={22} color="#979797" />
              <Text text70 color="#979797">
                Return to main settings
              </Text>
            </View>
          </TouchableOpacity>
          <Text text60R marginL-30 marginB-20>
            Chore Reward Settings
          </Text>
          <ToDosList />
        </ScrollView>
      </View>
    </ToDosContextProvider>
  );
};

export default ChoreRewardSettings;