import React, {Component} from 'react';

import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
import Block from '../../../components/Block';
import Icon from 'react-native-vector-icons/AntDesign';
import {getFontXD} from '../../../Config/Functions';
import R from '../../../assets/R';

const Item = (props) => {
  const {title, increase, content, ratio, time} = props.item;
  return (
    <TouchableOpacity
      onPress={() => console.log('hello')}
      style={styles.container}>
      <Text style={styles.txtTitle}>{title}</Text>
      <Text>{content}</Text>
      <View style={styles.row}>
        <Block row center>
          <View
            style={[styles.wrap, increase ? {backgroundColor: '#03A021'} : {}]}>
            <Icon name={'arrowup'} color={'white'} />
            <Text style={{color: 'white'}}>Giao dich trong ngay</Text>
          </View>
          <View
            style={[styles.wrap2, increase ? {borderColor: '#03A021'} : {}]}>
            <Text>{ratio}</Text>
          </View>
        </Block>
        <Text style={{color: '#929292'}}>{time}</Text>
      </View>

      <Image
        source={R.images.tradding}
        resizeMode={'contain'}
        style={styles.img}
      />
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    marginVertical: 10,
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginVertical: 10,
  },
  wrap: {
    backgroundColor: '#D62936',
    alignItems: 'center',
    flexDirection: 'row',
    marginRight: 10,
    padding: 5,
    borderRadius: 10,
  },
  wrap2: {
    padding: 3,
    borderWidth: 1,
    borderColor: '#D62936',
    alignItems: 'center',
    borderRadius: 2,
  },
  txtTitle: {
    fontSize: getFontXD(46),
    color: 'black',
    fontWeight: 'bold',
  },
  img: {
    width: '100%',
    height: 280,
  },
});

export default Item;
