import React from "react";
import { ScrollView, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { StatusBar } from "expo-status-bar";
import { useColorScheme } from "nativewind";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "../../components/card";
import { Heading, MutedText } from "../../components/text";
export function AuthPage({ layout = "card", title, subtitle, icon, corner, children, footer, maxWidth = 440, }) {
    const { colorScheme } = useColorScheme();
    const isDark = colorScheme === "dark";
    if (layout === "screen") {
        return (<SafeAreaView className="flex-1 bg-background dark:bg-black">
        <StatusBar style={isDark ? "light" : "dark"}/>
        <ScrollView className="flex-1" contentContainerStyle={{ flexGrow: 1 }} keyboardShouldPersistTaps="handled">
          <View className="flex-1 px-6 pb-10 pt-4">
            {/* The corner control sits in the 40px above the heading rather
                than absolutely over the content, which is where the card
                layout puts it. Same row every screen in the flow leaves for a
                back control, so the headings all land in the same place. */}
            <View className="mb-4 h-10 flex-row items-center">{corner}</View>

            <Heading className="text-3xl" numberOfLines={1} adjustsFontSizeToFit minimumFontScale={0.7}>
              {title}
            </Heading>
            {subtitle ? (<MutedText className="mt-2 text-base leading-6">{subtitle}</MutedText>) : null}

            <View className="flex-1 pt-6">{children}</View>
            {footer ? <View className="gap-2 pt-6">{footer}</View> : null}
          </View>
        </ScrollView>
      </SafeAreaView>);
    }
    return (<SafeAreaView className="flex-1 bg-background dark:bg-black">
      <StatusBar style={isDark ? "light" : "dark"}/>
      <ScrollView className="flex-1" contentContainerClassName="flex-1 items-center justify-center p-6" keyboardShouldPersistTaps="handled">
        {corner ? <View className="absolute left-6 top-4 mt-4 self-start">{corner}</View> : null}

        <Card className="w-full" style={{ maxWidth }}>
          <CardHeader className="items-center">
            {icon}
            <CardTitle className="text-center text-2xl">{title}</CardTitle>
            {subtitle ? (<CardDescription className="text-center text-base">{subtitle}</CardDescription>) : null}
          </CardHeader>

          <CardContent className="gap-4 pb-3">{children}</CardContent>

          {footer ? (<CardFooter className="flex-col items-stretch gap-1 border-t-0 pt-0">
              {footer}
            </CardFooter>) : null}
        </Card>
      </ScrollView>
    </SafeAreaView>);
}
export default AuthPage;
//# sourceMappingURL=AuthPage.jsx.map