import { View, Text, TouchableOpacity } from 'react-native'
import { useRouter, useLocalSearchParams } from 'expo-router'
import { SafeAreaView } from 'react-native-safe-area-context'

export default function CheckEmailScreen() {
  const router = useRouter()
  const { email } = useLocalSearchParams<{ email: string }>()

  return (
    <SafeAreaView className="flex-1 bg-white">
      <View className="flex-1 justify-center items-center px-6">
        {/* Envelope Illustration */}
        <View className="w-24 h-24 bg-brand-50 rounded-full items-center justify-center mb-6">
          <Text className="text-5xl">📧</Text>
        </View>

        <Text className="text-2xl font-bold text-gray-900 text-center mb-3">
          Schau in dein Postfach
        </Text>
        <Text className="text-gray-500 text-center leading-6 mb-2">
          Wir haben einen Login-Link an
        </Text>
        <Text className="font-semibold text-gray-900 text-center mb-6">
          {email}
        </Text>
        <Text className="text-gray-500 text-center leading-6">
          Klicken Sie auf den Link in der E-Mail, um sich einzuloggen.
          Der Link ist 24 Stunden gültig.
        </Text>

        <View className="mt-10 space-y-3 w-full">
          <TouchableOpacity
            onPress={() => router.back()}
            className="py-3 items-center"
          >
            <Text className="text-brand-500 font-medium">
              ← Andere E-Mail verwenden
            </Text>
          </TouchableOpacity>
        </View>
      </View>
    </SafeAreaView>
  )
}