import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { useFonts } from 'expo-font';
import AppLoading from 'expo-app-loading';
import { PxPagination } from '@proximus/react-native-common-ui/lib/pagination';

const items = [
  { label: '1', value: 0 },
  { label: '2', value: 1 },
  { label: '3', value: 2 },
  { label: '4', value: 3 },
  { label: '5', value: 4 },
  { label: '6', value: 5 },
];
export default function App() {
  const [selected, setSelected] = useState(0);
  const [loaded] = useFonts({
    Nucleo: require('@proximus/react-native-font-icons/lib/assets/fonts/Nucleo.ttf'),
    'Proximus-Bold': require('@proximus/react-native-font-icons/lib/assets/fonts/Proximus-Bold.ttf'),
    'Proximus-Regular': require('@proximus/react-native-font-icons/lib/assets/fonts/Proximus-Regular.ttf'),
  });

  if (!loaded) {
    return <AppLoading />;
  }

  return (
    <View style={styles.container}>
      <View style={styles.viewRow}>
        <PxPagination
          onNextPress={() => setSelected(selected + 1)}
          onPreviousPress={() => setSelected(selected - 1)}
          onSelect={setSelected}
          selected={selected}
          items={items}
          text={`out of ${items.length} pages`}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    justifyContent: 'center',
    padding: 20,
  },
  viewRow: {
    marginBottom: 10,
  },
});