import { StyleSheet, Text, ImageBackground, TouchableOpacity } from 'react-native'
import React from 'react'
import LinearGradient from 'react-native-linear-gradient'
import { horizontalScale, moderateScale, verticalScale } from '../../../constants/metrics'
import colors from '../../../constants/colors'
import fonts from '../../../constants/fonts'

const ImageBGCard = ({image, author, headline, onPress, }) => {


  const styles = StyleSheet.create({
    cardImage: {
      height: 'auto',
      width: 'auto',
  
    },
    gradient: {
      borderRadius: moderateScale(8),
      height: verticalScale(240),
      justifyContent: 'flex-end',
      paddingHorizontal: horizontalScale(16),
      paddingVertical: verticalScale(10)
    },
    authorText: {
      color: colors().white,
      fontFamily: fonts.type.bold,
      fontSize: moderateScale(12)
    },
    headlineText: {
      color: colors().white,
      fontFamily: fonts.type.medium,
      fontSize: moderateScale(16)
    }
  })

  return (
    <TouchableOpacity onPress={onPress}>
      <ImageBackground source={image}
        imageStyle={{ borderRadius: moderateScale(8), }}
        style={styles.cardImage}
      >
        <LinearGradient
          colors={['transparent', 'black']}
          style={styles.gradient}
          start={{ x: 0.5, y: 0.3 }}

        >
          <Text style={styles.authorText}>
            by {author}
          </Text>
          <Text style={styles.headlineText}>{headline}</Text>
        </LinearGradient>
      </ImageBackground>

    </TouchableOpacity>
  )
}

export default ImageBGCard