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 (
    <>
      <StatusBar style="dark" />
      <Stack
        screenOptions={{
          headerShown: false,
          animation: "fade",
        }}
      />
      <Stack.Screen
        name="profile"
        options={{
          headerShown: true,
          title: "My Account",
          headerTitleStyle: {
            fontSize: 16,
            color: "#252A34",
          },
          headerShadowVisible: true,
          headerLeft: () => {
            return (
              <TouchableOpacity onPress={() => router.back()}>
                <GoBack />
              </TouchableOpacity>
            );
          },
          headerStyle: {
            backgroundColor: "#F3F5F8",
          },
          animation: "slide_from_right",
        }}
      />
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#F3F5F8",
  },
});