import { SafeAreaView, StyleSheet, Text } from 'react-native';
import { FlatList } from 'react-native-gesture-handler';
import { SearchBar } from '../../../components';
import CategoryItem from '../../../components/budget/categoryItem';
import useFetch from '../../../hooks/useFetch';

export default function Page() {

    const styles = StyleSheet.create({
        container: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
        },
        text: {
            color: "red",
            fontSize: 40,
        }
    });

    const {data, isLoading, reFetch} = useFetch({sql: "SELECT guid as category_guid, name as category_name, color as category_color FROM category", args: []});

    return (
        <SafeAreaView style={styles.container}>
            <Text style={styles.text}>Expense View</Text>
            <SearchBar placeholder='Nothing'></SearchBar>
            
            
            <FlatList 
            data={data} 
            renderItem = {({item}) => <CategoryItem category={item.category_name} allocated_account={100} color={item.category_color}/>}>

            </FlatList>

            
        </SafeAreaView>
    );
}