import { Image,ImageBackground, StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native'
import React from 'react'
import colors from '../../../theme/colors'
import images from '../../../assets/images/images'
import fonts from '../../../theme/fonts'

const NoBookmarkSection = () => {
  return (
    <View style={styles.container}>
      <View style={styles.imageContainer}><Image source={images.noBookmark} style={[styles.image]}/></View>
      <Text style={styles.headline}>You have no bookmarked news</Text>
        <TouchableWithoutFeedback  onPress={null}>
            <View style={styles.button}><Text style={styles.buttonText}>Explore News</Text></View>
        </TouchableWithoutFeedback>
    </View>
  )
}

export default NoBookmarkSection

const styles = StyleSheet.create({
    container:{
        backgroundColor:colors.white,
        height:'100%',
        alignItems:'center',
        justifyContent:'center',
        paddingHorizontal: fonts.getSize(16)
    },
    imageContainer:{
        
    },
    image:{
      height:300,
      width: 300,
      maxHeight: '80%',
      maxWidth: '80%'
    },
    headline:{
        color: colors.topColor,
        fontFamily: fonts.type.semibold,
        fontSize: fonts.getSize(16),
        paddingBottom: fonts.getSize(32)
    },
    button:{
        backgroundColor: colors.tertiaryColor,
        marginHorizontal: fonts.getSize(24),
        maxWidth: '100%',
        width:'100%',
        flexDirection: 'row',
        alignItems:'center',
        justifyContent:'center',
        borderRadius: fonts.getSize(4)
    },
    buttonText:{
       
       paddingVertical: fonts.getSize(12),
       color:colors.white,
       fontFamily:fonts.type.regular
    }
})