import React from 'react';
import {View, Text, ScrollView} from 'react-native';
import {Container, Header, Input, Button} from 'components';
import {Colors} from 'global-styles';
import styles from './styles';
import {useTranslation} from 'react-i18next';
const Register = ({navigation}) => {
  const {t} = useTranslation();
  return (
    <Container backgroundColor={Colors.WHITE}>
      <Header navigation={navigation} smTitle={t('partner_with_us_text')} />
      <View style={styles.container}>
        <ScrollView>
          <View style={styles.infoSection}>
            <Text style={styles.title}>{t('register_merchant_title')}</Text>
            <Text style={styles.subTitle}>
              {t('register_merchant_subtitle')}
            </Text>
          </View>
          <Input
            type="text"
            label={t('full_name_of_business_owner_text')}
            note={t('full_name_of_business_owner_note')}
          />
          <View style={styles.spacing} />
          <Input
            type="phone"
            label={t('phone_number_business_owner_text')}
            note={t('phone_number_business_owner_note')}
          />
          <View style={styles.spacing} />
          <Input
            type="text"
            label={t('email_business_owner_text')}
            note={t('email_business_owner_note')}
          />
        </ScrollView>
        <Button
          title={t('join_as_a_partner_text')}
          onPress={() => navigation.navigate('BusinessProfileRegistration')}
        />
      </View>
    </Container>
  );
};

export default Register;
