import React from 'react';
import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
import ProgressiveImage from "./ProgressiveImage";

import Colors from "../constants/colors";

const defaultImage = 'https://icon-library.com/images/full_name_1346459_83431.png';

const PersonCard = (props) => {
    return (
        <TouchableOpacity
            style={ {...styles.cardContainer, ...props.style} }
            onPress={() => props.onSelect(props.person)}
        >
            <ProgressiveImage style={styles.image}
                              uri={props.person.image}
                              loadingUri={defaultImage}
                              errorUri={defaultImage}
                              resizeMode={'contain'}
            />
            <View style={styles.textContainer}>
                <Text
                    numberOfLines={2}
                    adjustsFontSizeToFit
                    style={styles.personText}
                >{props.person.name}
                </Text>
            </View>
        </TouchableOpacity>
    );
}

const styles = StyleSheet.create({
    cardContainer: {
        height: 180,
        width: '42.5%',
        backgroundColor: Colors.primary500,
        elevation: 10,
        marginLeft: '5%',
        marginTop: '5%',
    },
    personText: {
        textAlign: 'center',
        color: 'black',
        fontSize: 20
    },
    image: {
        height: 150,
        width: '100%',

    },
    textContainer: {
        justifyContent: 'center',
        height: 40,
        width: '100%',
        backgroundColor: Colors.accent500,
    }
});

export default PersonCard;