import React from 'react';
import { StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';

export default function LoginScreen() {

    const [username, setUsername] = React.useState('');
    const [password, setPassword] = React.useState('');

    function login(username:string, password:string) {
        console.log(username, password);
    }

    return (
        <View style={styles.container}>
            <Text style={styles.text}>Login</Text>
            <View style={{ width: '80%', marginTop: 20 }}>
                <Text style={styles.text}>Username</Text>
                <TextInput
                    style={styles.input}
                    value={username}
                    placeholder="Enter username"
                    onChangeText={setUsername}
                />
                <Text style={styles.text}>Password</Text>
                <TextInput
                    style={styles.input}
                    value={password}
                    placeholder="Enter password"
                    secureTextEntry
                    onChangeText={setPassword}

                />
                <TouchableOpacity
                    style={styles.button}
                    onPress={() => login(username, password)}
                >
                    <Text style={{ color: '#fff', fontWeight: 'bold' }}>Login</Text>
                </TouchableOpacity>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#25292e',
        justifyContent: 'center',
        alignItems: 'center',
    },
    text: {
        color: '#fff',
    },
    input: {
        backgroundColor: '#fff',
        borderRadius: 5,
        padding: 10,
        marginBottom: 15,
    },
    button: {
        backgroundColor: '#1e90ff',
        padding: 12,
        borderRadius: 5,
        alignItems: 'center',
    }
});