import { NoteProvider } from "@/providers/NoteProvider";
import { useAuth } from "@/utils/AuthProvider";
import { Ionicons } from "@expo/vector-icons";
import { Stack } from "expo-router";
import { cssInterop } from "nativewind";
import React from "react";
import { StyleSheet, TouchableOpacity, Text } from "react-native";

cssInterop(Ionicons, {
  className: {
    target: "style",
    nativeStyleToProp: { color: true },
  },
});
const Page = () => {
  const { logout } = useAuth();

  return (
    <NoteProvider>
      <Stack>
        <Stack.Screen
          name="home"
          options={{
            title: "Voice Notes",
            headerRight: () => (
              <TouchableOpacity className="p-2 mr-4" onPress={logout}>
                <Text className="text-blue-500">Sign out</Text>
              </TouchableOpacity>
            ),
          }}
        />
      </Stack>
    </NoteProvider>
  );
};

export default Page;

const styles = StyleSheet.create({});