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

export default class RedeemCode extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.header}>
                    <Text style={{ textAlign: 'center', fontSize: 25 }}>Payment Code</Text>
                </View>
                <View>
                    <Text style={{ fontSize: 25, textAlign: 'center' }}>XY2313</Text>
                    <View style={{ borderWidth: 1, marginRight: 20, marginLeft: 20 }}></View>
                </View>
                <View style={styles.body}>
                    <View style={styles.current_balance}>
                        <View style={{ flex: 1, margin: 10 }}>
                            <Text style={{ fontSize: 20 }} >Current Balance</Text>
                        </View>
                        <View style={{ flex: 1, margin: 10 }}>
                            <Text style={{ fontSize: 20 }}>xxxxxxxxxxx</Text>
                        </View>
                    </View>
                    <View style={styles.redeem}>
                        <View style={{ flex: 1, margin: 10 }}>
                            <Text style={{ fontSize: 20 }} >Time</Text>
                        </View>
                        <View style={{ flex: 1, margin: 10 }}>
                            <Text style={{ fontSize: 20 }}>0:30</Text>
                        </View>
                    </View>
                    <View style={styles.button}>
                        <Button title="Cancel Payment" color="red" />
                    </View>
                </View>
            </View>
        )
    }
}


const styles = StyleSheet.create({

    container: {
        flex: 1,
        backgroundColor: '#ffff'
    },

    header: {
        flex: 0.5,
        margin: 10,
    },

    body: {
        flex: 3,
        margin: 10,
        marginTop: 0,
    },

    current_balance: {
        flexDirection: 'row',
        margin: 10,
    },

    redeem: {
        flexDirection: 'row',
        margin: 10
    },


    button: {
        height: 50,
        margin: 10,

    }

})