import { StyleSheet, Text, View, FlatList } from 'react-native'
import React from 'react'
// import SearchTextInput from '../../molecules/SearchTextInput'
import fonts from '../../../theme/fonts'
import { horizontalScale, verticalScale } from '../../../constants/metrics'
import HorizontalNewsCardVariant from '../../molecules/Cards/HorizontalNewsCardVariant'

const BookmarkSection = ({ navigation, data }) => {

    //const data = []
    const detailPageNavigation = (slug, id) => {
        navigation.navigate("Landing", { 'screen': 'NewsDetailPage', params: {articleId: id, articleSlug: slug} })
    }

    return (
        <View style={styles.container}>
            <View >
                {/* <SearchTextInput /> */}
                <FlatList
                    showsVerticalScrollIndicator={false}
                    ItemSeparatorComponent={() => <View style={{ height: verticalScale(8) }}></View>}
                    // ListFooterComponent={() => <View style={{height: fonts.getSize(16)}}></View>}
                    ListHeaderComponent={() => <View style={{ height: verticalScale(16) }}></View>}
                    data={data}
                    renderItem={(item) => <HorizontalNewsCardVariant onPress={() => detailPageNavigation("fox-news-hosts-own-words-come-back-to-haunt-trump-in-brutal-msnbc-supercut-2057347", "2057175")} />}
                    keyExtractor={item => data.indexOf(item)}

                />
            </View>

        </View>
    )
}

export default BookmarkSection

const styles = StyleSheet.create({
    container: {
        paddingHorizontal: horizontalScale(16),
    }

})