import { Stack } from "expo-router";
import { StatusBar } from "expo-status-bar";
import { TouchableOpacity } from "react-native";
import GoBack from "@/assets/icons/chevron_left.svg";
import { useRouter } from "expo-router";

export default function UserLayout() {
  const router = useRouter();

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