import { Button, ImageBackground, StyleSheet, Text, TextInput, View } from 'react-native';
import bg from './../../assets/imgs/bg.png';

export interface LoginScreenProps {
}

export default function LoginScreen(props: LoginScreenProps) {
      return (
          <ImageBackground source={bg} style={styles.background}>
              <View style={styles.container}>
                  <Text style={styles.logo}>APP</Text>

                    <View style={styles.main}>
                        <Text style={styles.label}>Login</Text>
                        <TextInput style={styles.input} placeholder='Digite seu email' />

                        <Text style={styles.label}>Senha</Text>
                        <TextInput style={styles.input} secureTextEntry placeholder='Digite sua senha'/>

                        <Text style={styles.resetPassword}>Esqueceu a senha?</Text>    
                        <Button title="Logar" />
                    </View>
              </View>
          </ImageBackground>
      );
  }

  const styles = StyleSheet.create({
      background: {width:'100%', height:'100%'},
      container: {
          flex: 1,
          justifyContent: 'center',
          padding: 10,
          alignItems: 'stretch'
      },
      logo: { color: 'white', fontSize: 50, textAlign: 'center'},
  
      main: { padding: 30},
      label: { color: 'white' },
      input: { backgroundColor: 'rgba(255,255,255,0.5)', borderRadius: 10},
      resetPassword: { textAlign: 'center', marginVertical: 10, color: 'white'}

});