import { SafeAreaView, StyleSheet, Text, View, ScrollView } from 'react-native'
import React from 'react'
import NewscoutTitleHeader from '../components/organisms/Headers/NewscoutTitleHeader'
import FormTextInput from '../components/molecules/FormTextInput';
import { capitalize } from '../utils/Constants/functions';
import ThemedTextButton from '../components/organisms/Buttons/ThemedTextButton';


const ContactUsPage = ({navigation}) => {

  const [contactDetails, setContactDetails] = React.useState({
    fullname: '',
    email: '',
    message: ''
  });

  return (
    <SafeAreaView>
      <NewscoutTitleHeader title={"Contact Us"} backButtonShown onBackClick={() => navigation.goBack()} />
      <ScrollView showsVerticalScrollIndicator>
        <SafeAreaView style={{ padding: 16, gap: 8 }}>
          {Object.keys(contactDetails).map(key => <FormTextInput
            title={capitalize(key)}
            multiline
            placeholder={capitalize(key)}
            value={contactDetails[key]}
            onChange={text =>
              setProfileData(prev => ({ ...prev, [key]: text }))
            }
          />)}
          <ThemedTextButton
            title={'Contact Us'}
            onPress={true}
            theme={'secondary-contained'}
            buttonStyle={{
              marginVertical: 16,
              width: 'auto'
            }} />
        </SafeAreaView>
      </ScrollView>

    </SafeAreaView>
  )
}

export default ContactUsPage

const styles = StyleSheet.create({})