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";
import { settingsPageIndex } from "../calendar/atoms";
import { useAtom } from "jotai";

const ChoreRewardSettings = () => {
  const [pageIndex, setPageIndex] = useAtom(settingsPageIndex);

  return (
    <ToDosContextProvider>
      <TouchableOpacity onPress={() => setPageIndex(0)}>
        <View row marginT-20 marginB-20 marginL-20 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>
      <View marginH-20>
        <ScrollView>
          <Text text60R marginB-20>
            Chore Reward Settings
          </Text>
          <ToDosList isSettings />
        </ScrollView>
      </View>
    </ToDosContextProvider>
  );
};

export default ChoreRewardSettings;