import React from "react";
import { Platform, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Link } from "expo-router";
import { useNavigation } from "../../context/NavigationContext";
import { StatusBar } from "expo-status-bar";
import { useColorScheme } from "nativewind";
import { Heading, MutedText, Text } from "../../components/text";
import { Button } from "../../components/button";
import { useAppConfig } from "../../context/AppConfigContext";
export function WelcomeScreen({ decoration, topAccessory }) {
    const { colorScheme } = useColorScheme();
    const isDark = colorScheme === "dark";
    const router = useNavigation();
    const { appName, Logo, routes, tagline } = useAppConfig();
    return (<SafeAreaView className="flex-1 bg-background dark:bg-black">
      <StatusBar style={isDark ? "light" : "dark"}/>
      <View className="flex-1 items-center justify-center px-6 py-8">
        {topAccessory}

        <View className="mb-6 items-center">
          <View className="mb-1 flex-row items-center">
            <Logo width={72} height={72} style={{ marginRight: -2 }}/>
            <Heading className="text-4xl">{appName}</Heading>
          </View>
          {tagline ? <Text className="font-mono text-base text-foreground">{tagline}</Text> : null}
        </View>

        {decoration ? (<View className={Platform.OS === "web" ? "mb-6 pt-6 pb-4" : "mb-4 pt-3 pb-3"}>
            {decoration}
          </View>) : null}

        <View className="w-full max-w-[360px] gap-3">
          <Button className="w-full" telemetryId="auth.welcome.push" onPress={() => router.push(routes.login)}>
            Sign In
          </Button>
          <Button variant="outline" className="w-full" telemetryId="auth.welcome.push_2" onPress={() => router.push(routes.register)}>
            Create Account
          </Button>
        </View>
      </View>

      <View className="px-5 pb-6">
        <MutedText className="text-center text-xs">
          By continuing, you agree to our{" "}
          <Link href={routes.termsOfService} asChild>
            <Text className="text-xs text-foreground underline">Terms of Service</Text>
          </Link>{" "}
          and{" "}
          <Link href={routes.privacyPolicy} asChild>
            <Text className="text-xs text-foreground underline">Privacy Policy</Text>
          </Link>
        </MutedText>
      </View>
    </SafeAreaView>);
}
export default WelcomeScreen;
//# sourceMappingURL=WelcomeScreen.jsx.map