blogrecommendationCard

import React from 'react'
import { ImageBackground, Pressable, StyleSheet, Text, View } from "react-native"
import { height, width } from "../../constants/constants"
import { colors } from "../../theme"
import { Separator } from "../common/Separator"
import { BlogDetailsComponent } from "../common/BlogDetailsComponent"
import fonts from '../../assets/fonts'
import { CategoryIndicator } from '../common/CategoryIndicator'

interface BlogRecommendationCardPropTypes {
    bannerImage: string;
    category: string;
    title: string;
    description: string;
    authorImage: string;
    authorName: string;
    readTime: string;
    uploadDate: string;
    onPress: (item?: any) => void | any;
    cardBackgroundColor?: string;
}

export const BlogRecommendationCard: React.FC<BlogRecommendationCardPropTypes> = ({
    bannerImage,
    category,
    title,
    description,
    authorImage,
    authorName,
    readTime,
    uploadDate,
    onPress,
    cardBackgroundColor
}) =>
(<View style={{
        width: width,
    }}>
        <Pressable
            style={styles.pressableCardStyles}
            onPress={() => onPress()}>
            <ImageBackground
                source={{ uri: bannerImage }}
                borderTopLeftRadius={16}
                borderTopRightRadius={16}
                style={styles.blogBgImage}
                resizeMode='cover'>
                <CategoryIndicator
                    title={category}
                />
            </ImageBackground>
            <View style={cardBackgroundColor ? {
                ...styles.blogContainer,
                backgroundColor: cardBackgroundColor
            } : styles.blogContainer}>
                <Text style={styles.blogTitle}>{title}</Text>
                <Text style={styles.blogDescription}>{description}</Text>
                <Separator
                    color={colors.cE8E8E8}
                    marginApart={16}
                />
                <BlogDetailsComponent
                    authorImage={authorImage}
                    authorName={authorName}
                    readTime={readTime}
                    uploadDate={uploadDate}
                />
            </View>
        </Pressable>
    </View>)

const styles = StyleSheet.create({
    blogBgImage: {
        height: height * .268,
        padding: 16,
        alignItems: 'flex-start',
    },
    blogContainer: {
        padding: 16,
        backgroundColor: colors.cf9f9f9,
        borderBottomLeftRadius: 16,
        borderBottomRightRadius: 16,
        width: '100%',
    },
    blogTitle: {
        fontFamily: fonts.PoppinsRegular,
        fontWeight: '500',
        fontSize: 16,
        color: '#222222',
        lineHeight: 20
    },
    blogDescription: {
        fontFamily: fonts.PoppinsRegular,
        fontWeight: '400',
        fontSize: 12,
        color: colors.c666666,
        marginTop: 8,
        marginBottom: 4,
    },
    pressableCardStyles: {
        position: 'relative',
        width:width*.88,
        alignSelf: 'center'
    }
})