import { View, Text, FlatList, Pressable, Image } from 'react-native'
import React, { useEffect, useState } from 'react'
import { useFonts } from 'expo-font';
import globalAPI from '../Service/globalAPI';
import { useNavigation } from 'expo-router';

const HomeHeadlineList = ({newsList}) => {
  const navigation = useNavigation();

  useFonts({
    'playFairBold': require('../../assets/fonts/PlayfairDisplay-Bold.ttf'),
    'playFair': require('../../assets/fonts/PlayfairDisplay-Regular.ttf') 
  })

  return (
    <View>
      <FlatList data={newsList} renderItem={({item}) => (
        <>
          <Pressable onPress={() => navigation.navigate('news', {news:item})} style={{padding: 5, display: "flex", flexDirection: "row"}}>
              <Image source={{uri:item.urlToImage}} style={{height: 120, width: 120}}/>
              <View style={{marginLeft: 5, marginRight: 130}}>
                  <Text numberOfLines={3} style={{marginTop: 5, fontSize: 16, fontFamily: 'playFairBold'}}>{item.title}</Text>
                  <Text style={{marginTop: 5,color: "gray"}}>{item?.source?.name}</Text>
              </View>
          </Pressable>
          <View style={{height:1, backgroundColor: "gray", marginHorizontal: 5}}></View>
        </>
      )}/>
    </View>
  )
}

export default HomeHeadlineList