import React from 'react';
import { StyleSheet, View } from 'react-native';
import { useFonts } from 'expo-font';
import {
  Txt1,
  Txt10,
  Txt11,
  Txt12,
  Txt13,
  Txt14,
  Txt2,
  Txt3,
  Txt4,
  Txt5,
  Txt6,
  Txt7,
  Txt8,
  Txt9
} from '@proximus/react-native-common-ui/lib/texts/v7/Txt';

export default function App() {
  const loaded = useFonts({
    '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'),
    'Proximus-Light': require('@proximus/react-native-font-icons/lib/assets/fonts/Proximus-Light.ttf'),
    'Proximus': require('@proximus/react-native-font-icons/lib/assets/fonts/Proximus-Regular.ttf'),
    'Proximus-ExtraBold': require('@proximus/react-native-font-icons/lib/assets/fonts/Proximus-ExtraBold.ttf'),
  });

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

  return (
    <View style={styles.container}>
      <Txt1>Txt1 text</Txt1>
      <Txt2>Txt2 text</Txt2>
      <Txt3>Txt3 text</Txt3>
      <Txt4>Txt4 text</Txt4>
      <Txt5>Txt5 text</Txt5>
      <Txt6>Txt6 text</Txt6>
      <Txt7>Txt7 text</Txt7>
      <Txt8>Txt8 text</Txt8>
      <Txt9>Txt9 text</Txt9>
      <Txt10>Txt10 text</Txt10>
      <Txt11>Txt11 text</Txt11>
      <Txt12>Txt12 text</Txt12>
    </View>
  );
}

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