import { Stack } from "expo-router";
import { StatusBar } from "expo-status-bar";
import { View, StyleSheet, TouchableOpacity } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import GoBack from "@/assets/icons/chevron_left.svg";
import { useRouter } from "expo-router";

export default function AuthLayout() {
  const router = useRouter();
  return (
    <SafeAreaView style={styles.container} edges={["top"]}>
      <StatusBar style="dark" />
      <Stack
        screenOptions={{
          headerShown: false,
          animation: "fade",
        }}
      />
      <Stack.Screen
        name="login"
        options={{
          headerShown: true,
          title: "",
          headerShadowVisible: false,
          headerLeft: () => {
            return (
              <TouchableOpacity onPress={() => router.back()}>
                <GoBack />
              </TouchableOpacity>
            );
          },
          headerStyle: {
            backgroundColor: "#F3F5F8",
          },
        }}
      />
    </SafeAreaView>
  );
}
// useEffect(() => {
//   navigation.setOptions({
//     headerShown: true,
//     title: "",
//     headerLeft: () => {
//       return (
//         <TouchableOpacity onPress={() => router.back()}>
//           <GoBack />
//         </TouchableOpacity>
//       );
//     },
//     headerShadowVisible: false,
//     headerStyle: {
//       backgroundColor: "#F3F5F8",
//     },
//   });
// }, []);
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#F3F5F8",
  },
});