import { ScrollView, StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native'
import React from 'react'
import NewscoutCenteredTitleHeader from '../components/organisms/Headers/NewscoutCenteredTitleHeader'
import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
import colors from '../theme/colors'
import fonts from '../theme/fonts'
import NotificationSection from '../components/organisms/Sections/NotificationSection'
import { SafeAreaView } from 'react-native-safe-area-context'

const NotificationsPage = props => {
    const {
        navigation
    } = props
    
    return (
        <SafeAreaView>
            <NewscoutCenteredTitleHeader title={"Notifications"} backButtonShown onBackClick={() => navigation.goBack()}>
                
                <TouchableWithoutFeedback onPress={() => navigation.toggleDrawer()}>
                    <MaterialIcon name='list' color={colors.topColor} size={30} />
                </TouchableWithoutFeedback>
            </NewscoutCenteredTitleHeader>
            <ScrollView showsVerticalScrollIndicator>
                <NotificationSection/>
                <NotificationSection/>
            </ScrollView>
           
        </SafeAreaView>
    )
}

export default NotificationsPage

const styles = StyleSheet.create({
    headerTitle: {
        fontFamily: fonts.type.semibold,
        fontSize: fonts.getSize(16),
        color: colors.black,
    },
})