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

const HomeTopHeadline = () => {
  const navigation = useNavigation();
  
  useFonts({
    'playFairBold': require('../../assets/fonts/PlayfairDisplay-Bold.ttf'),
    'playFair': require('../../assets/fonts/PlayfairDisplay-Regular.ttf') 
  })
    
  const [newsList, setNewsList] = useState([]);
  useEffect(() => {
    getTopHeadline();
  }, [])
    
  const getTopHeadline = async() => {
    const result = (await GlobalAPI.getTopHeadline).data;
    setNewsList(result.articles)
  }

  return (
    <View>
      <FlatList data={newsList} horizontal showsHorizontalScrollIndicator={false} renderItem={({item}) => (
        <Pressable onPress={() => navigation.navigate('news', {news:item})} style={{width:Dimensions.get('screen').width*0.95, marginRight: 10, marginTop: 5, marginBottom: 5}}>
            <Image source={{uri:item.urlToImage}} style={{height: 300}}/>
            <View style={{backgroundColor: "#F5F7F8", padding: 10}}>
                <Text numberOfLines={2} style={{marginTop: 5, fontSize: 22, fontFamily: 'playFairBold'}}>{item.title}</Text>
                <Text style={{marginTop: 5, color: "gray"}}>{item?.source?.name}</Text>
            </View>
        </Pressable>
      )}/>
    </View>
  )
}

export default HomeTopHeadline