import React from 'react';
import { ScrollView, StyleSheet, View, Text } from 'react-native';
import { useFonts } from 'expo-font';
import { PxMessageBox } from '@proximus/react-native-common-ui/lib/messageBox';
import AppLoading from 'expo-app-loading';

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: 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'),
    PxIcon: require('@proximus/react-native-font-icons/lib/assets/fonts/PxIcon.ttf'),
    Nucleo: require('@proximus/react-native-font-icons/lib/assets/fonts/Nucleo.ttf'),
  });

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

  const onClose = () => undefined;
  return (
    <ScrollView style={styles.container}>
      <PxMessageBox
        type="success"
        title="Box Title"
        subtitle="Box Subtitle"
        isVisible={true}
        wrapperStyle={{ margin: 20 }}
        onClose={onClose}
      />
      <PxMessageBox
        type="error"
        title="Box Title"
        subtitle="Box Subtitle"
        isVisible={true}
        wrapperStyle={{ margin: 20 }}
        onClose={onClose}
      />
      <PxMessageBox
        type="info"
        title="Box Title"
        subtitle="Box Subtitle"
        isVisible={true}
        wrapperStyle={{ margin: 20 }}
        onClose={onClose}
      />
      <PxMessageBox
        type="warning"
        title="Box Title"
        subtitle="Box Subtitle"
        isVisible={true}
        wrapperStyle={{ margin: 20 }}
        onClose={onClose}
      />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    paddingHorizontal: 5,
    paddingTop: 50,
    paddingBottom: 200,
  },
});