import React from "react" ; import { Text , View , Image , Dimensions , TouchableOpacity } from "react-native" ; import Icon from "./Icon" ; import { CardItemT } from "../types" ; import styles , { DISLIKE_ACTIONS , FLASH_ACTIONS , LIKE_ACTIONS , STAR_ACTIONS , WHITE , } from "../assets/styles" ; const CardItem = ( { description , hasActions , hasVariant , image , isOnline , matches , name , } ) => { const fullWidth = Dimensions . get ( "window" ) . width ; const imageStyle = [ { borderRadius : 8 , width : hasVariant ? fullWidth / 2 - 30 : fullWidth - 80 , height : hasVariant ? 170 : 350 , margin : hasVariant ? 0 : 20 } , ] ; const nameStyle = [ { paddingTop : hasVariant ? 10 : 15 , paddingBottom : hasVariant ? 5 : 7 , color : "#363636" , fontSize : hasVariant ? 15 : 30 } , ] ; return ( < View style = { styles . containerCardItem } > { } < Image source = { image } style = { imageStyle } / > { } { matches && ( < View style = { styles . matchesCardItem } > < Text style = { styles . matchesTextCardItem } > < Icon name = "heart" color = { WHITE } size = { 13 } / > { matches } % Match ! < /Text> < /View>)} { } < Text style = { nameStyle } > { name } < /Text> { } { description && ( < Text style = { styles . descriptionCardItem } > { description } < /Text>)} { } { ! description && ( < View style = { styles . status } > < View style = { isOnline ? styles . online : styles . offline } /> < Text style = { styles . statusText } > { isOnline ? "Online" : "Offline" } < /Text> < /View>)} { } { hasActions && ( < View style = { styles . actionsCardItem } > < TouchableOpacity style = { styles . miniButton } > < Icon name = "star" color = { STAR_ACTIONS } size = { 14 } / > < /TouchableOpacity> < TouchableOpacity style = { styles . button } > < Icon name = "heart" color = { LIKE_ACTIONS } size = { 25 } / > < /TouchableOpacity> < TouchableOpacity style = { styles . button } > < Icon name = "close" color = { DISLIKE_ACTIONS } size = { 25 } / > < /TouchableOpacity> < TouchableOpacity style = { styles . miniButton } > < Icon name = "flash" color = { FLASH_ACTIONS } size = { 14 } / > < /TouchableOpacity> < /View>)} < /View>); } ; export default CardItem ;