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>
  );
}