import { Pressable, Text, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { useAuthStore } from "@/stores/auth-store";
import type { RootStackScreenProps } from "@/navigation/types";

export function AccountScreen({ navigation }: RootStackScreenProps<"Account">) {
  const user = useAuthStore((s) => s.user);

  return (
    <SafeAreaView className="flex-1 bg-background" edges={["top"]}>
      <View className="flex-row items-center px-3 py-3 border-b border-border">
        <Pressable onPress={() => navigation.goBack()} className="px-2 py-1">
          <Text className="text-foreground text-2xl">‹</Text>
        </Pressable>
        <Text className="flex-1 text-center text-foreground text-base font-semibold">
          Account
        </Text>
        <View className="w-8" />
      </View>

      <View className="px-6 py-6 gap-4">
        <Field label="Email" value={user?.email ?? "—"} />
      </View>
    </SafeAreaView>
  );
}

function Field({ label, value }: { label: string; value: string }) {
  return (
    <View className="gap-1">
      <Text className="text-muted-foreground text-xs uppercase tracking-wide">
        {label}
      </Text>
      <Text className="text-foreground text-base">{value}</Text>
    </View>
  );
}
