import React, { useEffect, useState } from 'react';
import { View, Text, FlatList } from 'react-native';
import { getSimplePrice } from '../services/market';

export default function HomeScreen() {
  const [prices, setPrices] = useState<any>({});

  useEffect(() => {
    (async () => {
      try {
        const data = await getSimplePrice(['bitcoin','ethereum']);
        setPrices(data);
      } catch (e) {
        console.error(e);
      }
    })();
  }, []);

  return (
    <View style={{flex:1, padding:20}}>
      <Text style={{fontSize:20}}>Crypto Prices</Text>
      <FlatList
        data={Object.keys(prices)}
        keyExtractor={(i) => i}
        renderItem={({item}) => (
          <View style={{padding:12, borderBottomWidth:1, borderColor:'#eee'}}>
            <Text style={{fontSize:16}}>{item.toUpperCase()}</Text>
            <Text>USD: {prices[item]?.usd}</Text>
            <Text>24h: {prices[item]?.usd_24h_change?.toFixed(2)}%</Text>
          </View>
        )}
      />
    </View>
  );
}