svg

import React from 'react';
import { useNavigation } from '@react-navigation/native';
import { SafeAreaView, View, Text, Image, FlatList, TouchableOpacity } from 'react-native';
import { SvgUri } from 'react-native-svg';

import styles from './styles';

const DATA = [
  {
    id: '1',
    title: 'Compre online',
    icon: 'https://i.imgur.com/oaWzXPG.png', //https://i.imgur.com/oaWzXPG.png
    page: 'buy'
  },
  {
    id: '2',
    title: 'Tshirts',
    icon: 'https://i.imgur.com/C4WClTQ.png',
    page: 'tshirt'
  },
  {
    id: '3',
    title: 'Tamanhos',
    icon: 'https://i.imgur.com/nhWciEW.png',
    page: 'size'
  },
  {
    id: '4',
    title: 'Pontos de venda',
    icon: 'https://i.imgur.com/jSqlLnc.png',
    page: 'point'
  },
];

const Information = () => {

  const navigation = useNavigation();

  function navigateToInformation(info){
    switch (info) {
      case 'buy':
        navigation.navigate('InformationBuy', { info });
        break;

      case 'tshirt':
        navigation.navigate('InformationTshirt', { info });
        break;

      case 'size':
        navigation.navigate('InformationSize', { info });
        break;

      case 'point':
        navigation.navigate('InformationPoint', { info });
        break;

      default:
        navigation.navigate('Home', { info });
        break;
    }
  }

  return (
    <SafeAreaView>
      <View style={styles.containerInformation}>
        <FlatList
          data={DATA}
          horizontal
          showsHorizontalScrollIndicator={false}
          onEndReachedThreshold={0.2}
          contentContainerStyle={{
              paddingHorizontal: 14
          }}
          keyExtractor={item => item.id} //renderItem
          renderItem={({ item: info }) => (
            <View style={styles.item}>
              <TouchableOpacity onPress={() => navigateToInformation(info.page)}>
                <Image style={styles.icon} source={{ uri: `${info.icon}` }} />
              </TouchableOpacity>
              <Text style={styles.title}>{info.title}</Text>
            </View>
          )}
        />
      </View>
    </SafeAreaView>
  );
}

export default Information;