import { View, Text, StyleSheet } from "react-native"
import { FlatList } from "react-native-gesture-handler"
import { CITIES_DATA, City } from "../data/stub"
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { VilleCompopo } from "../components/VilleCompopo";
import { TopBar } from "../components/TopBar";


export default function CityList(props: any){
    const insets = useSafeAreaInsets();
    const statusBarHeight = insets.top;

    return (
        <View style={{alignItems: "center", marginTop: statusBarHeight}}>
            <TopBar/>
            <FlatList
            data={CITIES_DATA}
            keyExtractor={item =>item.name}
            renderItem={({item}) => <VilleCompopo city={item}/>}
            style={{width: "100%", alignSelf: "center"}} 
            />
        </View>
    )
}


const leStyle = StyleSheet.create({
    container: {
        alignItems: 'center',
    },
});