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

import ProgressiveImage from "../components/ProgressiveImage";
const defaultImage = 'https://icon-library.com/images/full_name_1346459_83431.png';

const PersonDetailScreen = (props) => {
    const person = props.navigation.getParam('person');
    return(
        <View style={styles.screen}>
            <ProgressiveImage style={styles.bannerImage}
                              uri={person.image}
                              loadingUri={defaultImage}
                              errorUri={defaultImage}
                              resizeMode={'contain'}
            />
            <View style={styles.titleContainer}>
                <Text style={styles.titleText}>{person.name}</Text>
            </View>
            <Text style={styles.bodyText}>{person.birthday.toString()}</Text>

        </View>
    );
}

const styles = StyleSheet.create({
    screen: {
        width: '100%',
        height: '100%'
    },
    bannerImage: {
        width: '100%',
        height: 300
    },
    titleContainer: {
        height: 50,
        width: '100%',
        backgroundColor: 'rgba(170, 170, 170, 0.7)',
        justifyContent: 'center',
        alignItems: 'center'
    },
    titleText: {
        fontWeight: 'bold',
        fontSize: 25
    },
    bodyContainer: {
        width: '100%',
        padding: 20,
    },
    bodyText: {
        fontSize: 16,
        lineHeight: 25
    }
});

export default PersonDetailScreen;