import { Image, StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native'
import React from 'react'
import images from '../../../assets/images/images'
import ShareButton from '../Buttons/ShareButton'
import { getTimestamp } from '../../../constants/functions'
import BookmarkButton from '../../atoms/Buttons/BookmarkButton'
import { horizontalScale, moderateScale, screenWidth, verticalScale } from '../../../constants/metrics'
import fonts from '../../../constants/fonts'
import colors from '../../../constants/colors'
import { unsubscribeFromKeyboardEvents } from 'react-native-reanimated/lib/typescript/reanimated2/core'


const HorizontalNewsCard = ({ style, headline, tagline, category, timestamp, image, onPress }) => {

    const styles = StyleSheet.create({
        cardContainer: {
            width: 'auto',
            maxWidth: screenWidth,
            height: verticalScale(190),
            backgroundColor: colors().dominant_variant,
            borderRadius: moderateScale(4),
            flexDirection: 'row',
            // paddingBottom:fonts.getSize(24)
        },
        imageContainer: {
            width: "45%",

        },
        textContainer: {
            width: "55%",
            paddingVertical: verticalScale(8),
            paddingLeft: horizontalScale(16),
            justifyContent: 'flex-start',
            gap: moderateScale(12)
        },
        headline: {
            fontFamily: fonts.type.medium,
            textDecorationLine: 'underline',
            fontSize: moderateScale(16),
            color: colors().recessive
        },
        tagline: {
            fontSize: moderateScale(12),
            fontFamily: fonts.type.regular,
            maxHeight: '40%',
            overflow: 'hidden',

        },
        descriptors: {
            flexDirection: 'row',
            justifyContent: 'space-around'
        },
        categoryDescriptor: {
            fontFamily: fonts.type.light
        },
        timeDescriptor: {
            fontFamily: fonts.type.light
        },
        imageSub: {
            alignItems: 'center',
            justifyContent: 'center',
            padding: moderateScale(14),
            paddingBottom: 0
        },
        utilButtons: {
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-around'
        }
    })

    return (
        <TouchableWithoutFeedback onPress={onPress}>
            <View style={[styles.cardContainer, style]}>
                <View>
                    <View style={styles.textContainer}>
                        <View>
                            <Text style={styles.headline}> {headline ?? "Battlegrounds Mobile India iOS release date"}</Text>
                            <Text style={styles.tagline}>{tagline ?? "government is the people, for the people, by the people but the people are retarded "}</Text>
                        </View>

                    </View>
                    <View style={styles.imageContainer}>
                        <View style={styles.imageSub}>
                            <Image source={image ?? images.horizontalCard} style={{ aspectRatio: 0.9 }} />
                        </View>

                    </View>
                </View>
                <View>
                    <View style={styles.descriptors}>
                        <Text style={styles.categoryDescriptor}>{category ?? "Sports"}</Text>
                        <Text style={styles.timeDescriptor}>{getTimestamp(timestamp) ?? "27 mins ago"}</Text>
                    </View>
                    <View style={styles.utilButtons}>
                        <BookmarkButton onPress={true} />
                        <ShareButton onPress={true} />
                    </View>
                </View>
            </View>
        </TouchableWithoutFeedback>
    )
}

export default HorizontalNewsCard

