import styles from '@/styles/screens/auth/recover.styles';
import { ReactNode } from 'react';
import {
  Image,
  ImageBackground,
  KeyboardAvoidingView,
  Platform,
  ScrollView,
  StatusBar,
  Text,
  View,
} from 'react-native';

type Props = {
  title: string;
  subtitle: string;
  children: ReactNode;
};

export function RecoverScreenLayout({ title, subtitle, children }: Props) {
  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 20}>
      <StatusBar barStyle="light-content" />
      <ScrollView
        contentContainerStyle={styles.scrollContent}
        keyboardShouldPersistTaps="handled"
        showsVerticalScrollIndicator={false}
        bounces={false}>
        <ImageBackground
          source={require('@/assets/images/banner-login.png')}
          style={styles.hero}
          imageStyle={styles.heroImage}>
          <View style={styles.overlay} />
          <View style={styles.heroContent}>
            <Image
              source={require('@/assets/icons/logotipo-branco.png')}
              style={styles.logo}
              resizeMode="contain"
            />
            <Text style={styles.title}>{title}</Text>
            <Text style={styles.subtitle}>{subtitle}</Text>
          </View>
        </ImageBackground>

        <View style={styles.formCard}>{children}</View>
      </ScrollView>
    </KeyboardAvoidingView>
  );
}