Newscout_Mobile/src/components/molecules/Cards/HorizontalNewsCardVariant.js

import { StyleSheet, Text, View, TouchableOpacity, TouchableWithoutFeedback, Image } from 'react-native'
import React, { useContext } from 'react'
import BookmarkButton from '../../atoms/Buttons/BookmarkButton'
import ShareButton from '../../atoms/Buttons/ShareButton'
import { horizontalScale, moderateScale, screenWidth, verticalScale } from '../../../constants/metrics'
import fonts from '../../../constants/fonts'
import colors from '../../../constants/colors'
import { getScreenType, getTimestamp } from '../../../constants/functions'
import images from '../../../assets/images/images'
import { ThemeContext } from '../../../context/theme.context'



const HorizontalNewsCardVariant = ({ headline, image, category, timestamp, tagline, onPress, onBookmarkPress, onSharePress}) => {

  const theme = useContext(ThemeContext)
  const currentTheme = theme.state.theme

  const styles = StyleSheet.create({
    cardContainer: {
      borderRadius: moderateScale(16),
      width: 'auto',
      // minWidth: horizontalScale(320),
      maxWidth: horizontalScale(320),
      maxHeight: verticalScale(200),
      backgroundColor: currentTheme === 'light' ? colors().white: colors().black_variant,
      elevation: 4,
      marginHorizontal: horizontalScale(8),
      padding: moderateScale(16),
      paddingBottom: 0
      // paddingBottom:fonts.getSize(24)
    },
    topSection: {

      height: "70%",
      maxHeight: 'auto',
      flexDirection: 'row',
      width: '100%',
      maxWidth: '100%',
      justifyContent: 'flex-start'

    },
    middleSection: {
      flexDirection: 'row',
      alignItems: 'baseline',
      justifyContent: 'space-between'
    },
    bottomSection: {

    },
    imageContainer: {
      width: "40%",

    },
    textContainer: {
      width: "55%",
      
      height: '100%',
      maxHeight: 'auto',
      justifyContent: 'center',
      // justifyContent: 'center',
      gap: moderateScale(12),
      marginRight: "5%"
    },
    headline: {
      fontFamily: fonts.type.semibold,
      fontSize: moderateScale(15),
      color : colors().recessive

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


  return (
    <TouchableOpacity onPress={onPress}>
      <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)}</Text>
          </View>
          <View style={styles.utilButtons}>
            <BookmarkButton size={20} onPress={onBookmarkPress} />
            <ShareButton size={20} onPress={onSharePress} />
          </View>
        </View>
      </View>
    </TouchableOpacity>
  )
}

export default HorizontalNewsCardVariant