import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
import PxTextInput from '@proximus/react-native-common-ui/lib/inputs/PxTextInput';
import { useFonts } from 'expo-font';

export default function TextFieldsErrorApp() {
  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'),
  });

  const [inputValue, setInputValue] = useState('Prefilled content');

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

  return (
    <View style={styles.container}>
      <PxTextInput
        style={{ height: 50 }}
        placeholder="This is a placeholder"
        value={inputValue}
        onChangeText={setInputValue}
        inputLabelText="Input label (optional)"
      />
    </View>
  );
}

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