import {
  View,
  ScrollView,
  KeyboardAvoidingView,
  Platform,
  useWindowDimensions,
} from "react-native";
import { StatusBar } from "expo-status-bar";
import { LinearGradient } from "expo-linear-gradient";

interface AuthLayoutProps {
  children: React.ReactNode;
}

export const AuthLayout = ({ children }: AuthLayoutProps) => {
  const { width } = useWindowDimensions();
  const isWideScreen = width > 768;

  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === "ios" ? "padding" : "height"}
      style={{ flex: 1 }}
    >
      <StatusBar style="light" />
      <LinearGradient
        colors={["#A78FA1", "#6750a4", "#49385D"]}
        style={{ flex: 1 }}
      >
        <ScrollView
          contentContainerStyle={{
            flexGrow: 1,
            justifyContent: "center",
            paddingHorizontal: isWideScreen ? 32 : 16,
            paddingVertical: isWideScreen ? 32 : 24,
          }}
          keyboardShouldPersistTaps="handled"
        >
          <View
            style={{
              alignSelf: isWideScreen ? "center" : "stretch",
              width: isWideScreen ? 550 : "100%",
            }}
          >
            {children}
          </View>
        </ScrollView>
      </LinearGradient>
    </KeyboardAvoidingView>
  );
};