import { Image, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import images from '../../../assets/images/images'
import { horizontalScale, moderateScale, verticalScale } from '../../../constants/metrics'
import colors from '../../../constants/colors'
import { getTimestamp } from '../../../utils/functions'
import fonts from '../../../constants/fonts'


const PROFILE_IMAGE = 52
const NOTIFICATION_IMAGE = PROFILE_IMAGE

const NotificationCard = ({ navigation, profileImage, tagline, headline, timestamp, image }) => {


  const styles = StyleSheet.create({
    cardContainer: {
      flexDirection: 'row',
      width: '100%',
      justifyContent: 'space-between',
      alignItems: 'center',
      padding: moderateScale(8),
      height: verticalScale(88),
      backgroundColor: colors().dominant,
      borderRadius: moderateScale(16),
      elevation: moderateScale(2)
    },
    profileIcon: {
      height: PROFILE_IMAGE,
      width: PROFILE_IMAGE,
      borderRadius: PROFILE_IMAGE,

    },
    notificationImage: {
      height: NOTIFICATION_IMAGE,
      width: NOTIFICATION_IMAGE,
      borderRadius: 8,
    },
    headline: {
      fontFamily: fonts.type.bold,
      color: colors().recessive_variant,
      fontSize: moderateScale(12)
    },
    tagline: {
      fontFamily: fonts.type.regular,
      color: colors().grayShade_200,
      fontSize: 12
    },
    timestamp: {
      fontFamily: fonts.type.light,
      color: colors().grayShade_300,
      fontSize: 12
    }
  })

  return (
    <View style={styles.cardContainer}>
      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
        <Image source={images.imageCard ?? profileImage} style={styles.profileIcon} />
        <View style={{ paddingLeft: horizontalScale(8) }}>
          <Text style={styles.headline}>{headline ?? "semina is now following you"}</Text>
          <Text style={styles.tagline}>{tagline ?? "semi has posted new politics news"}</Text>
          <Text style={styles.timestamp}>{getTimestamp(timestamp) ?? getTimestamp("2023-06-16T11:57:52.458032Z")}</Text>
        </View>
      </View>
      <View>
        {image ? <Image source={images.horizontalCard ?? image} style={styles.notificationImage} /> : <></>}
      </View>

    </View>
  )
}

export default NotificationCard