import { View, Text, FlatList, Pressable, StyleSheet} from 'react-native'
import React, { useState } from 'react'
import { useFonts } from 'expo-font';

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

    const [active, setActive] = useState(1);
    const onCategoryClick = (id) => {
        setActive(id);
    }
    //category
    
    const category = [
        {
            id: 1,
            name: 'Latest'
        },
        {
            id: 2,
            name: 'World'
        },
        {
            id: 3,
            name: 'Business'
        },
        {
            id: 4,
            name: 'Politics'
        },
        {
            id: 5,
            name: 'Economy'
        },
        {
            id: 6,
            name: 'Tech'
        },
        {
            id: 7,
            name: 'Lifestyle'
        },
        {
            id: 8,
            name: 'Sports'
        },
    ]


  return (
    <View style={{borderWidth: 2, borderColor: "#EEEDEB"}}>
      <FlatList data={category} horizontal renderItem={({item}) => (
        <Pressable onPress={() => {onCategoryClick(item.id); selectCategory(item.name)}}>
            <View style={{backgroundColor: "#F5F7F8",borderWidth: 1 ,borderColor: "white"}}>
                <Text style={item.id == active? styles.selectTopic : styles.notSelectTopic}>{item.name}</Text>
            </View>
        </Pressable>
      )}/>
    </View>
  )
}

const styles= StyleSheet.create({
    notSelectTopic:{
        marginRight: 10, 
        fontSize: 18, 
        padding: 10,
        color: "#45474B",
        fontFamily: 'playFair'
    },
    selectTopic:{
        marginRight: 10, 
        fontSize: 20, 
        fontWeight: '700',
        padding: 10,
        color: "black",
        fontFamily: 'playFairBold'
    }
})

export default HomeCategory