content: import React from 'react';
  
  import {
      View,
      TouchableOpacity,
      StyleSheet,
      Text, 
  } from 'react-native';
  
  export default ChapterComponent = (props) => {
      const {
          completed,
          shortName,
      } = props;
      return (
          <TouchableOpacity style={styles.card} onPress={() => {console.warn("yaaas")}}>
              <View style={[styles.cardHeader, completed && styles.cardHeaderCompleted]}>
                  {completed ? 
                      <Text>Completed</Text>:
                      <Text>Not started</Text>
                  }
              </View>
              <View style={styles.cardFooter}>
                  <View style={{alignItems:"center", justifyContent:"center"}}>
                  <Text style={styles.title}>{shortName}</Text>
                  </View>
              </View>
          </TouchableOpacity>
      );
  }
  
  const styles = StyleSheet.create({
      /******** card **************/
    card:{
      shadowColor: '#00000021',
      shadowOffset: {
        width: 0,
        height: 6,
      },
      shadowOpacity: 0.37,
      shadowRadius: 7.49,
  
      elevation: 12,
      marginVertical: 10,
      backgroundColor:"white",
      flexBasis: '42%',
      marginHorizontal: 10,
    },
    cardFooter: {
      paddingVertical: 17,
      paddingHorizontal: 16,
      borderTopLeftRadius: 1,
      borderTopRightRadius: 1,
      flexDirection: 'row',
      alignItems: "center", 
      justifyContent: "center"
    },
    cardContent: {
      paddingVertical: 12.5,
      paddingHorizontal: 16,
    },
    cardHeader:{
      flexDirection: 'row',
      justifyContent: 'space-between',
      paddingTop: 12.5,
      paddingBottom: 12.5,
      paddingHorizontal: 16,
      borderBottomLeftRadius: 1,
      borderBottomRightRadius: 1,
      alignItems: 'center',
      justifyContent: "center",
      backgroundColor: "#EF9A9A",
    },
    cardHeaderCompleted: {
      backgroundColor: "#C5E1A5",
    },
    cardImage:{
      height: 70,
      width: 70,
      alignSelf:'center'
    },
    title:{
      fontSize:18,
      flex:1,
      alignSelf:'center',
      color:"#696969"
    },
  });