React-Nav-Melon/components/organisms/Cards/HorizontalNewsCardVariant.js

import { StyleSheet, Text, View, TouchableWithoutFeedback, Image } from 'react-native'
import React from 'react'
import metrics from '../../../theme/metrics'
import fonts from '../../../theme/fonts'
import colors from '../../../theme/colors'
import images from '../../../assets/images/images'
import BookmarkButton from '../Buttons/BookmarkButton'
import ShareButton from '../Buttons/ShareButton'
import { getTimestamp } from '../../../utils/Constants/functions'


const HorizontalNewsCardVariant = ({ headline, image, category, timestamp, tagline, onPress }) => {
  return (
    <View style={styles.cardContainer}>
      <View style={styles.topSection}>
        <View style={styles.textContainer}>
          <TouchableWithoutFeedback onPress={onPress}>
            <Text style={styles.headline}>{headline ?? "Battlegrounds Mobile India iOS release date"}</Text>
          </TouchableWithoutFeedback>
        </View>
        <View style={styles.imageContainer}>
          <View style={styles.imageSub}>
            <Image source={image ?? images.horizontalCard} style={styles.image} />
          </View>
        </View>
      </View>
      <View style={styles.middleSection}>
        <View style={styles.descriptors}>
          <Text style={styles.timeDescriptor}>{getTimestamp(timestamp) ?? "27 mins ago"}</Text>
        </View>
        <View style={styles.utilButtons}>
          <BookmarkButton size={20} onPress={true} />
          <ShareButton size={20} onPress={true} />
        </View>
      </View>
      <View style={styles.bottomSection}>
      <Text style={styles.tagline}>{tagline ?? "government is the people, for the people, by the people but the people are retarded "}</Text>
      </View>
    </View>
  )
}

export default HorizontalNewsCardVariant

const styles = StyleSheet.create({
  cardContainer: {
    width: 'auto',
    maxWidth: metrics.screenWidth,
    maxHeight: fonts.getSize(220),
    backgroundColor: colors.white,
    borderRadius: fonts.getSize(15),
    padding: fonts.getSize(16)
    // paddingBottom:fonts.getSize(24)
  },
  topSection: {

    height: "55%",
    flexDirection: 'row',
    width: '100%',
    maxWidth: '100%',
    justifyContent: 'space-between'

  },
  middleSection:{
    flexDirection:'row',
   
    justifyContent:'space-between'
  },
  bottomSection: {
    
  },
  imageContainer: {
    width: "35%",

  },
  textContainer: {
    width: "65%",
    height: '100%',

    justifyContent: 'center',
    gap: fonts.getSize(12),

  },
  headline: {
    fontFamily: fonts.type.semibold,
    fontSize: fonts.getSize(18),
    color: colors.black,

  },
  tagline: {
    fontSize: fonts.getSize(12),
    fontFamily: fonts.type.regular,
    overflow:'hidden'
  },
  descriptors: {
    justifyContent:'center'
  },
  categoryDescriptor: {
    fontFamily: fonts.type.light
  },
  timeDescriptor: {
    fontFamily: fonts.type.light
  },
  imageSub: {
    alignItems: 'flex-end',
    justifyContent: 'center',
  },
  image: {
    width: '100%',
    height: '100%',
    borderRadius: fonts.getSize(8)
  },
  utilButtons: {
    flexDirection: 'row',
    padding: fonts.getSize(8),
    width:64,
    justifyContent:'space-between'
    //  padding:0
    // alignItems: 'flex-start',
    // justifyContent: 'flex-end',
    // backgroundColor: colors.black
  }
})