import { StyleSheet, Text, View, ScrollView, TouchableWithoutFeedback } from 'react-native'
import React from 'react'
import CategorySection from '../../components/organisms/Sections/CategorySection'
import RecentPostsSection from '../../components/organisms/Sections/RecentPostsSection'
import TrendingSection from '../../components/organisms/Sections/TrendingSection'
import NewscoutHomeHeader from '../../components/molecules/Header/NewscoutHomeHeader'
import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
import colors from '../../constants/colors'


const HomePage = props => {

  const { navigation, route } = props

  return (
    <View style={{backgroundColor: colors().dominant}}>

      <ScrollView showsHorizontalScrollIndicator={false}>
        <NewscoutHomeHeader>
          <View style={{ alignItems: 'center', flexDirection: 'row', gap: 16 }}>
            <TouchableWithoutFeedback onPress={() => navigation.navigate('NotificationPage')}>
              <MaterialIcon name='notifications-none' color={colors().secondaryColor} size={30} />
            </TouchableWithoutFeedback>
            <TouchableWithoutFeedback onPress={() => navigation.toggleDrawer()}>
              <MaterialIcon name='list' color={colors().primaryColor} size={30} />
            </TouchableWithoutFeedback>
          </View>
        </NewscoutHomeHeader>
        <TrendingSection navigation={navigation}/>
        <CategorySection navigation={navigation} />
        <RecentPostsSection />
      </ScrollView>
    </View>
  )
}

export default HomePage

const styles = StyleSheet.create({})