import React, {Component} from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  TouchableOpacity,
  ImageBackground,
} from 'react-native';
import R from '../../../assets/R';
import {getFontXD} from '../../../Config/Functions';
import Icon from 'react-native-vector-icons/AntDesign';
import {useNavigation} from '@react-navigation/native';
import {MEDIADETAIL} from '../../../routers/ScreenNames';
const Item = (props) => {
  const navigate = useNavigation();
  const {title, time_ago, poster, view_count, id, video_id} = props.item;

  return (
    <TouchableOpacity
      onPress={() => navigate.navigate(MEDIADETAIL, {id, video_id, title})}
      style={styles.container}>
      <ImageBackground
        resizeMode={'contain'}
        source={{uri: poster}}
        imageStyle={{borderRadius: 5}}
        style={styles.img}>
        <Icon
          name={'playcircleo'}
          color={R.colors.white}
          size={getFontXD(62)}
        />
      </ImageBackground>
      <Text style={styles.txtTitle} numberOfLines={2}>
        {title}
      </Text>
      <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
        <Text style={{color: '#8E8C8C'}}>{time_ago}</Text>
        <View style={styles.row}>
          <Icon name={'eye'} size={getFontXD(36)} color={'#8E8C8C'} />
          <Text style={{color: '#8E8C8C'}}>{view_count}</Text>
        </View>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    width: 250,
    paddingVertical: 5,
    marginRight: 15,
  },
  img: {
    width:  250,
    height: 200,
    borderRadius: 5,
    justifyContent: 'center',
    alignItems: 'center',
  },
  txtTitle: {
    fontSize: getFontXD(42),
    marginVertical: 5,
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    width: 40,
    justifyContent: 'space-around',
  },
});

export default Item;
