import {ScrollView, StyleSheet, Text, View} from 'react-native';
import React from 'react';
import NewscoutTitleHeader from '../components/organisms/Headers/NewscoutTitleHeader';
import NewscoutLogo from '../components/molecules/NewscoutLogo';
import colors from '../theme/colors';
import fonts from '../theme/fonts';

const AboutUsPage = props => {
  const {navigation} = props;
  return (
    <View style={styles.container}>
      <ScrollView showsVerticalScrollIndicator={false}>
        <NewscoutTitleHeader
          title={'About Us'}
          backButtonShown
          onBackClick={() => navigation.goBack()}
        />
        <View style={styles.logoContainer}>
          <NewscoutLogo style={styles.logoStyle} />
        </View>
        <Text style={styles.tagline}>
          We focused on Providing best news and article
        </Text>
        <Text style={styles.aboutText}>
          Lorem ipsum dolor sit amet, consectetur adipiscing incididunt ut
          labore et dolore maliquip ex ea commodo consequat."Lorem ipsum dolor
          sit amet, consectetur adipiscing incididunt ut labore et dolore
          maliquip ex ea commodo consequat.Lorem ipsum dolor sit amet,
          consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
          exercitation ullamco laboris nis
        </Text>
        <Text style={styles.aboutText}>
          Lorem ipsum dolor sit amet, consectetur adipiscing incididunt ut
          labore et dolore maliquip ex ea commodo consequat."Lorem ipsum dolor
          sit amet, consectetur adipiscing incididunt ut labore et dolore
          maliquip ex ea commodo consequat.Lorem ipsum dolor sit amet,
          consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
          exercitation ullamco laboris nis
        </Text>
      </ScrollView>
    </View>
  );
};

export default AboutUsPage;

const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.white,
    height: '100%',
  },
  logoContainer: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  logoStyle: {
    height: 240,
    width: 240,
  },
  tagline: {
    fontFamily: fonts.type.medium,
    color: colors.grayShade_200,
    textAlign: 'center',
  },
  aboutText: {
    textAlign: 'left',
    paddingVertical: 16,
    paddingHorizontal: 24,
  },
});