/**
 * 通用 loginView 封装
 */
import React from 'react';
import { View, Text, Image, Pressable, StyleSheet } from 'react-native';

interface Props {
    goLogin: any;
}

export const LoginView = (props: Props) => {
    return (
        <View style={styles.login}>
            <Image
                style={styles.image}
                source={ require('../static/img/login/transform.png') }
            />
            <Text style={styles.welcome}>使用推特登录 DeNet</Text>
            <Pressable style={styles.button} onPress={props.goLogin}>
                <Text style={styles.buttonText}>Login</Text>
            </Pressable>
        </View>
    );
};

const styles = StyleSheet.create({
    image: {
        width: 264,
        height: 100,
        marginBottom: 39,
    },
    welcome: {
        fontSize: 18,
        marginBottom: 12,
        fontWeight: 'bold',
    },
    login: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#fff',
    },
	button: {
        display: 'flex',
        width: 335,
        height: 46,
		alignItems: 'center',
		justifyContent: 'center',
        backgroundColor: '#000',
        borderRadius: 56,
	},
    buttonText: {
        color: '#fff',
        fontSize: 20,
        fontWeight: 'bold',
    }
});
