import React from 'react';
import { ScrollView, StyleSheet, View } from 'react-native';
import {
  PxBubble,
  PxBubbleAdvantages,
  PxBanner,
} from '@proximus/react-native-common-ui/lib/bubbles/v7';

import { useFonts } from 'expo-font';
import AppLoading from 'expo-app-loading';

export default function App() {
  const [loaded] = useFonts({
    // prettier-ignore
    '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'),
  });

  if (!loaded) {
    return <AppLoading />;
  }
  return (
    <ScrollView contentContainerStyle={styles.container}>
      <View style={{ marginBottom: 10 }}>
        <PxBubble
          title="Promo"
          type="promo"
          borderType="topLeft"
          iconName="InformationBox"
          isFocused={true}
        />
      </View>
      <View style={{ marginBottom: 10 }}>
        <PxBubble
          title="Promo"
          type="promo"
          borderType="topLeft"
          iconName="InformationBox"
          clickable={false}
        />
      </View>

      <View style={{ marginBottom: 10 }}>
        <PxBubble
          title="New"
          type="info"
          borderType="topRight"
          iconName="InformationBox"
        />
      </View>

      <View style={{ marginBottom: 10 }}>
        <PxBubble
          title="Black Friday"
          borderType="bottomLeft"
          type="blackfriday"
          iconName="InformationBox"
        />
      </View>

      <View style={{ marginBottom: 10 }}>
        <PxBubble
          title="Eco Friendly"
          borderType="bottomRight"
          type="eco"
          iconName="InformationBox"
        />
      </View>

      <View style={{ marginBottom: 10 }}>
        <PxBubbleAdvantages
          title="Mobile Advantages"
          type="mobile"
          iconName="InformationBox"
        />
      </View>

      <View style={{ marginBottom: 10 }}>
        <PxBubbleAdvantages
          title="Belfius Advantages"
          type="belfius"
          iconName="InformationBox"
        />
      </View>
      {/* <View style={{ marginBottom: 10 }}>
        <PxBanner title="Banner" type="info" colorStyle="style1" />
      </View>
      <View style={{ marginBottom: 10 }}>
        <PxBanner title="Recommended" type="promo" colorStyle="style2" />
      </View>
      <View style={{ marginBottom: 10 }}>
        <PxBanner title="Recommended" type="promo" colorStyle="style3" />
      </View> */}
    </ScrollView>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});