content: import React from 'react';
  import PropTypes from 'prop-types';
  import { View, TouchableHighlight, Text, Image, StyleSheet } from 'react-native';
  import { Actions } from 'react-native-router-flux';
  import Icon from 'react-native-vector-icons/Ionicons';
  import Button from 'react-native-button';
  import moment from 'moment';
  const overlay = require('../images/thumb_overlay.png');
  
  export class ArticleTile extends React.PureComponent {
    constructor(props) {
      super(props);
      this.handleAddToFavourites = this.handleAddToFavourites.bind(this);
      this.handleOpenArticle = this.handleOpenArticle.bind(this);
    }
  
    handleAddToFavourites() {
      this.props.addFavourite(this.props.data);
    }
  
    handleOpenArticle() {
      this.props.openArticle(this.props.data.url, this.props.data.title);
    }
  
    render() {
      const { data } = this.props;
      return (
        <Button
          onPress={this.handleOpenArticle}
          containerStyle={StyleSheet.flatten([styles.wrapper, { height: this.props.single ? 250 : 160 }])}
        >
          <View style={styles.container}>
          <Image
            style={styles.image}
            source={{ uri: data.urlToImage}}
          />
          <Image
            style={styles.overlay}
            source={overlay}
          />
          <Button containerStyle={styles.favouritesBtn} onPress={this.handleAddToFavourites}>
            <Icon name="ios-heart-outline" size={25} color="#FFF" />
          </Button>
          <View style={styles.textWrapper}>
            <Text style={styles.category}>TRAVEL</Text>
            <Text style={styles.title} numberOfLines={2}>{data.title}</Text>
            <Text style={styles.smallText}>{moment(data.publishedAt).format('MMMM D. YYYY')}</Text>
          </View>
          </View>
        </Button>
      );
    }
  }
  
  ArticleTile.propTypes = {};
  
  const styles = StyleSheet.create({
    wrapper: {
      flex: 0.5,
      height: 160,
    },
    container: {
      flex: 1,
      flexDirection: 'column',
      justifyContent: 'flex-end',
      backgroundColor: 'black',
    },
    image: {
      position: 'absolute',
      flex: 1,
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      zIndex: -2,
    },
    overlay: {
      position: 'absolute',
      flex: 1,
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      zIndex: -1,
    },
    textWrapper: {
      bottom: 0,
      padding: 7,
    },
    favouritesBtn: {
      position: 'absolute',
      flex: 1,
      top: 4,
      right: 4,
    },
    category: {
      width: 65,
      color: '#FFF',
      textAlign: 'center',
      fontSize: 11,
      backgroundColor: 'green',
    },
    title: {
      backgroundColor: 'transparent',
      color: '#FFF',
      fontSize: 16,
      fontWeight: '400',
      lineHeight: 17,
      marginTop: 6,
      marginBottom: 3,
    },
    smallText: {
      backgroundColor: 'transparent',
      color: '#FFF',
      fontSize: 10,
    }
  });
  
  export default ArticleTile;
  