import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
import colors from '../../constants/colors';
import fonts from '../../constants/fonts';
import { ScrollView } from 'react-native-gesture-handler';
import NewscoutTitleHeader from '../../components/molecules/Header/NewscoutTitleHeader';
import NewscoutLogo from '../../components/atoms/Logo/NewscoutLogo';

const AboutUsPage = props => {
    const { navigation } = props;

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

    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;

